在Angular 7中，你可以使用HostListener装饰器和EventEmitter来实现当点击外部时关闭菜单的功能。

首先，在你的组件类中定义一个clickOutside的EventEmitter：

import { Component, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent {
  @Output() clickOutside = new EventEmitter();

  constructor(private elementRef: ElementRef) { }

  @HostListener('document:click', ['$event.target'])
  onClick(targetElement: any) {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }
}

然后，在你的模板中使用*ngIf来控制菜单的显示与隐藏：

最后，在父组件中监听clickOutside事件并在回调函数中关闭菜单：

Toggle Menu

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  showMenu = false;

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

  hideMenu() {
    this.showMenu = false;
  }
}

这样，当你点击菜单以外的任何地方时，菜单将自动关闭。