Angular Material：为什么'#auto' ref 有赋值？

Question

为什么这个 ref #auto 有赋值？ 什么不明白？

这是https://material.angular.io/components/chips/examples的第一个例子。

示例：#auto="matAutocomplete"

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

谢谢！

Answer 1

当您分配一个值时，您表示引用导出为。 在您的代码中：#auto="matAutocomplete" 您说 ref auto 是 matAutocomplete 类型 https://material.angular.io/components/autocomplete/api#MatAutocomplete。注意：请参阅“导出为：matAutocomplete”

接下来的代码你可以看到几个例子来学习这种行为：

// inputRef1 is exported as elementRef (it has no assignment)
<input
  placeholder="New option..."
  #inputRef1
/>

// inputRef2 is exported as MatInput https://material.angular.io/components/input/api#MatInput
<input
  placeholder="New option..."
  matInput
  #inputRef2="matInput"
/>

// inputRef3 is exported as MatChipInput https://material.angular.io/components/chips/api#MatChipInput
<input
placeholder="New option..."
#inputRef3="matChipInput"
[matChipInputFor]="chipListRef"
/>

// For all examples you can 'transform' the type of element using 'read' property
@ViewChild('inputRef1', { static: false }) inputRef: ElementRef;
@ViewChild('inputRef1', { static: false, read: MatInput }) inputRef2: MatInput;
@ViewChild('inputRef1', { static: false, read: MatChipInput }) inputRef3: MatChipInput;