Angular 7：单击外部时关闭菜单

Question

我想知道每当在父 div #menu 内触发点击时，其中存在无关的 html 标签。

nativeElement.parent 对我不起作用。

HTML代码：

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

 <div class="menu" *ngIf="isMenuOpen" #menu>
    <div>
      I'm the menu. Click outside to close me
    </div>
    </div>

角脚本：

this.renderer.listen('window', 'click',(e:Event)=>{

        if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
            this.isMenuOpen=false;
        }
    });

这是行不通的。

Answer 1

将主机添加到组件元标记。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    "(window:click)": "onClick()"
  }
})

停止传播()

Event 接口的 stopPropagation() 方法可防止当前事件在捕获和冒泡阶段进一步传播。

toggleMenu($event) {    
    $event.stopPropagation();
    this.isMenuOpen = !this.isMenuOpen;
  }

  onClick() {
    this.isMenuOpen = false;
  }

示例：https : //stackblitz.com/edit/angular-oenkbw