如何在Angular 4中点击屏幕上任意位置的外部时关闭下拉菜单

在Angular 4中，可以通过以下步骤来实现在点击屏幕上任意位置的外部时关闭下拉菜单：

1. 首先，在组件的HTML模板中，使用ngIf或ngClass等指令来控制下拉菜单的显示与隐藏。例如：

<div class="dropdown" [ngClass]="{'show': isOpen}">
  <!-- 下拉菜单内容 -->
</div>

1. 在组件的Typescript文件中，定义一个变量来表示下拉菜单的状态。例如：

isOpen: boolean = false;

1. 在组件的构造函数中，使用HostListener装饰器来监听全局的点击事件。当点击事件触发时，检查点击的目标元素是否位于下拉菜单内部，如果不是，则关闭下拉菜单。例如：

constructor() {
  document.addEventListener('click', (event) => {
    if (!this.elementRef.nativeElement.contains(event.target)) {
      this.isOpen = false;
    }
  });
}

1. 在组件的HTML模板中，使用事件绑定来触发下拉菜单的显示与隐藏。例如：

<button (click)="isOpen = !isOpen">Toggle Dropdown</button>

通过以上步骤，当点击屏幕上任意位置的外部时，下拉菜单会关闭。

对于Angular 4中的下拉菜单，腾讯云提供了一款适用于Web开发的云产品，即腾讯云静态网站托管（Static Website Hosting）。该产品可以帮助开发者快速部署和托管静态网站，并提供了丰富的功能和工具来管理和优化网站。您可以通过以下链接了解更多关于腾讯云静态网站托管的信息：

腾讯云静态网站托管

请注意，以上答案仅供参考，具体实现方式可能因项目需求和开发环境而异。