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

时间:2019-12-10 10:48:32

标签: angular typescript

我想在matautocomplete面板打开时打印到控制台“ hello”。该怎么做?

这就是我尝试过的 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

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

1 个答案:

答案 0 :(得分:1)

@Output EventEmitter用于在父组件和子组件之间进行通信,专门用于从子组件通知父,因此,在您的情况下,mat-autocomplete是子组件,因此应在{内添加opened事件{1}}标签,例如:

mat-autocomplete

并且在您的组件(父级)内部声明<mat-autocomplete (opened)="isOpened()" ...> 方法,以便在打开自动完成功能并创建事件发射器的对象时触发该事件

isOpened(){}

Parent listen to child event