Angular 6 - 单击外部菜单答案

【问题标题】：Angular 6 - click outside menuAngular 6 - 单击外部菜单
【发布时间】：2019-01-08 00:55:35
【问题描述】：

我正在创建一个单击事件来记录关闭我的侧边菜单，我在 jquery 中创建了示例，但我不想在 jquery 中执行此操作，并且我无法访问“菜单”变量。

我怎样才能用纯角度写这个？

import { Component, HostListener, ElementRef } from "@angular/core";
import { Router } from "../../node_modules/@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  menu: boolean;
  date = new Date();

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.menu = false;
    } else {
      console.log('clicked outside');
    }
  }

  constructor(public router: Router,
              private eRef: ElementRef) {}

  showMenu() {
    this.menu = !this.menu;
  }


}

编辑我从重复中编辑了代码，但我有不同的想法

是否还有其他 HostListener 可以忽略并带有 id 按钮？还是我想错了？

当我点击旁边或按钮菜单时，此点击事件一定不起作用，当我点击其他任何地方时，它应该将我的 this.menu 设置为 false。

<aside id="aside" [hidden]="!menu">
  <button class="menu-btn" (click)="menu = false" routerLink="/">Strona Główna</button>
  <button (click)="menu = false" routerLink="/cv">CV</button>
  <button (click)="menu = false" routerLink="/bio">BIO</button>
  <button (click)="menu = false" routerLink="/portfolio">Portfolio</button>
  <button (click)="menu = false" routerLink="/kontakt">Kontakt</button>
</aside>
<button id="menu-btn" [class.aside]="menu" (click)="showMenu()">Klik</button>

【问题讨论】：

Detect click outside Angular component的可能重复
可以发下html代码吗？
@ConnorsFan 是的，它有效，但我在 console.log() 中看到答案而不是显示文本，当我只点击按钮时，它显示我点击了外部，其他任何地方显示点击内部，我想要向我显示“在内部单击”并仅在其中显示，其他任何地方都应显示在外部，是否有类似 @HostListener('aside') ???
您可以在aside 元素中处理click 事件，并停止传播以避免文档级别的点击处理程序：<aside [hidden]="!menu" (click)="handleClickAside(); $event.stopPropagation()">（在组件代码中定义了handleClickAside()） .
添加这个作为答案，干得好，谢谢！

标签： javascript jquery angular html typescript

【解决方案1】：

按照this answer 中的建议，您可以使用HostListener 检测文档click 事件。为确保在单击菜单时鼠标单击不会到达文档，您应该在 aside 元素上设置的 click 事件处理程序中停止事件的传播：

<aside [hidden]="!menu" (click)="handleAsideClick($event)">

@HostListener('document:click', ['$event']) clickout(event) {
  // Click outside of the menu was detected
  ...
}

handleAsideClick(event: Event) {
  event.stopPropagation(); // Stop the propagation to prevent reaching document
  ...
}

【讨论】：

【解决方案2】：

如果您只想在菜单外点击，您可以通过以下方式以编程方式触发对文档正文的点击：

document.body.click();

【讨论】：