javascript - Angular 7 : close menu when click outside

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>

Angular 脚本:

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()"
  }
})

停止传播()

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

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

  onClick() {
    this.isMenuOpen = false;
  }

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