如何在其他元素上使用自定义指令创建的引用？

Question

我正在尝试重现Angular Material的自动完成组件的第一个示例 https：//material.io/compol.io/components/autococtlete/autococtelete/autocoldete/overview

<form class="example-form">
  <mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Number</mat-label>
    <input type="text"
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

我需要拥有可重复使用的组件，但我找不到他们如何做到这一点。

因此，他们有一个指令称为 matautocomplete 和一个自定义组件 mat-autocomplete 。 首先，他们使用＃uato =“ matautocomplete” 在自定义组件上创建参考。创建了参考变量后，他们将该引用发送到 matautocomplete 指令，并在输入 [matautocomplete] =“ auto” 上使用此代码。

当我尝试重现同一件事时，我会制作一个自定义自动complete指令和一个自定义自动完成组件。

如您所见，它们都是空的 - 因此，自定义创建的组件中的HTML中没有什么。

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent implements OnInit {
}

tooltip Directive

import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[appAutocompleteCustom]',
  exportAs: 'appAutocompleteCustom'
})
export class AutocompleteCustomDirective {

  @Input() appAutocompleteCustom;

  constructor() { }
}

之后，在 app.component.ts 文件中，当我尝试类似于它们的同一件事时，

<input type="text"
[appAutocompleteCustom]="auto" 
/>
<app-autocomplete #auto="appAutocompleteCustom" ></app-autocomplete>

我会获得错误

没有“ exportas”设置的指令到“ appautocompletecustom” 。 因此，为防止此错误发生，我需要添加关键字 appautocompletecustom ，因此我在创建参考的元素上的指令名称。

<app-autocomplete #auto="appAutocompleteCustom" appAutocompleteCustom></app-autocomplete>

此后，错误消失了。我的问题是他们如何做到这一点？当他们不在 mat-autocomplete 组件上附加指令关键字时，他们如何没有错误

Answer 1

因为他们在声明Mat-autocomplete组件时使用了exportas，

代码在这里：

@Component({
  selector: 'mat-autocomplete',
  templateUrl: 'autocomplete.html',
  styleUrls: ['autocomplete.css'],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  exportAs: 'matAutocomplete', <-- this line
  inputs: ['disableRipple'],
  providers: [...],
})
export class MatAutocomplete extends _MatAutocompleteBase {
  ...
}

通过Exportas的定义，定义了可以在模板中使用的名称将此指令分配给变量。 在这里。

您还声明exportas exportas：'appautocompletecustom'。但是它在内部自动填充。这就是为什么添加指令时，

<app-autocomplete #auto="appAutocompleteCustom" appAutocompleteCustom></app-autocomplete>

错误已经消失了