Javascript 角度6-单击外部菜单

我正在创建一个click事件来记录关闭我的备用菜单，我在jquery中创建了一个示例，但我不想在jquery中这样做，我无法访问“menu”变量

我怎么能用纯角度写呢

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为的按钮？还是我想错了

当我单击旁边或按钮菜单时，此clickout事件不得工作，当我单击其他任何位置时，它应将我的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>

斯特罗纳·戈沃纳
个人简历
生物
文件夹
康塔克
克里克

根据中的建议，您可以使用

主机侦听器检测文档
单击
事件。要确保单击菜单时鼠标单击不会到达文档，应在
旁边的
元素上设置的
单击
事件处理程序中停止事件传播：

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

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

document.body.click();

你可以发布html代码吗？@ConnorsFan是的，它可以工作，但我在console.log（）中看到答案，而不是显示文本，当我只单击按钮时，它显示我单击了外部，其他任何地方显示了单击了内部，我想显示我在aside元素内部“单击了内部”，只有在那里，其他任何地方都应该显示在外部，是否有类似于@HostListener（“aside”）的内容？您可以在
aside
元素中处理
click
事件，并停止传播以避免文档级别的click处理程序：
（使用组件代码中定义的
handleClickAside（）
）。将此作为答案添加，非常感谢！
document.body.click();