时间戳

首页 > 解决方案 > 打开matautocomplete面板时如何触发事件发射器

angular - 打开matautocomplete面板时如何触发事件发射器

问题描述

我想在 matautocomplete 面板打开时打印到控制台“你好”。这个怎么做？

这就是我尝试过的 template.html

<mat-form-field>
  <input class="selectCustomer" opened id="inputCustomer" matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl" [(ngModel)]="customerName">
  <mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
     <mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async"   [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
      {{customer.AccountID}} ({{customer.AccountName}})
     </mat-option>
  </mat-autocomplete>
</mat-form-field>

根据matautocomplete文档，我看到了这个，我不熟悉如何使用它来满足我的要求，有人可以帮我吗？

@Output() 打开：EventEmitter

打开自动完成面板时发出的事件。

标签： angulartypescript

解决方案

@Output EventEmitter 用于在父组件和子组件之间进行通信，专门用于从子组件通知父组件，因此在您的情况下mat-autocomplete是子组件，因此您应该在标签 ex中添加opened事件：mat-autocomplete

<mat-autocomplete (opened)="isOpened()" ...>

并在您的组件（父）declateisOpened(){}方法中，当自动完成打开并创建事件发射器的对象时被触发

  @Output() opened: EventEmitter<void> = new EventEmitter();

家长听孩子事件

推荐阅读