Блог

Почему эта ссылка #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>
 

Спасибо!

Когда вы присваиваете значение, которое вы указываете, ссылка экспортируется как. В вашем коде: #auto=»matAutocomplete» вы говорите, что ссылка 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;