Html 下拉菜单，单击角度8的外部关闭

Hii我正在使用

点击
p
标签上的
功能

当用户打开下拉菜单时，单击“外部”以“角度”关闭下拉菜单

Html代码

<div class="select_cat">
   <p class="cat_name" (click)="openCategoriesList()"> </p>
</div>
<div class="categories_list" *ngIf="openCategories">
   <ul *ngFor="let category of categories"> 
      <span class="title">{{category.group_name}}
      </span> 
      <li *ngFor="let categoryData of category.categories" (click)="categoryClick(categoryData)"> 
      </li> 
   </ul>
</div>




{{category.group_name}




{{food.viewValue}
从“@angular/core”导入{Component，ViewChild}；
@组成部分({
选择器：“选择概述示例”，
templateUrl:“选择概览示例.html”，
样式URL:['select-overview-example.css']，
})
导出类SelectOverview示例{
@ViewChild（“mySelect”）mySelect；
食物=[
{value:'steak-0'，viewValue:'steak'}，
{value:'pizza-1'，viewValue:'pizza'}，
{value:'tacos-2'，viewValue:'tacos'}
];
单击（）{
this.mySelect.open（）；
}
}
使用（文档：单击）事件：

.html代码

<div class="select_cat" #paraDiv> /* Created a reference here */
   <p class="cat_name" (click)="openCategoriesList()">Open CategoryList</p>
</div>
<div class="categories_list" *ngIf="openCategories">
   <ul *ngFor="let category of categories"> 
      <span class="title">{{category.group_name}}
      </span> 
      <li *ngFor="let categoryData of category.categories" (click)="categoryClick(categoryData)"> 
      </li> 
   </ul>
</div>

@Component({
  host: {
    '(document:click)': 'onDocumentClick($event)',
  }
})

@ViewChild('paraDiv', {static: false}) paraDiv;

onDocumentClick(event) {
   if (!this.paraDiv.nativeElement.contains(event.target)) { // outside click
     this.openCategories = false;
   }
}

Html代码
{{category.group_name}}你能提供你写的代码吗，或者提供一个最简单的例子fiddleHi Akash，clickout功能在html页面的何处使用我想现在很容易，我想使用click功能是P标记这种类型，当用户打开下拉菜单时，由于sameHi Akash对meHi Gangadhar有一点疑问，请建议meHi Gangadhar单击外部关闭angularcall关闭功能中的下拉列表，我在formarray中使用了多个复选框，用于被动表单如何在提交后重置值
@Component({
  host: {
    '(document:click)': 'onDocumentClick($event)',
  }
})

@ViewChild('paraDiv', {static: false}) paraDiv;

onDocumentClick(event) {
   if (!this.paraDiv.nativeElement.contains(event.target)) { // outside click
     this.openCategories = false;
   }
}