单击 Angular 8 外部关闭的下拉菜单

Question

嗨，我在p 标签上使用click 函数，

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

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>

Answer 1

使用（文档：点击）事件：

.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>

.ts 代码

@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;
   }
}

Answer 2

 <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>

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

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  @ViewChild('mySelect') mySelect;
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  click() {
    this.mySelect.open();
  }
}