如何访问我的内容投影指令？

Question

我有一个form-field 组件。在里面我正在投影内容 - 输入 html 元素。在那个元素上，我附加了名为 autoCompletition 的指令。

 <app-form-field>
     <input [id]="autoCompleteSearchInput" [formControl]='search' type="text" autoComplete="off"
        class='input-underline search-bar idented-text' placeholder="Enter" autoCompletion 
        #custom="autoCompletion"/>
 </<app-form-field>

<form>
    <p>form-field works!</p>
    <ng-content></ng-content>
</form>

我需要访问托管在输入上的指令。所以如果我给它起名字： #custom="autoCompletition 我可以像这样访问我的组件：

 @ContentChild('custom')
  directive?: ElementRef;

 ngAfterContentInit() {
  console.log('this.directive);
}

这种方法的问题是指令是硬编码的——所以它被称为custom。我需要一种使其可自定义的方法 - 所以它应该适用于任何名称。

如果我将父组件称为#someOtherName="autoCompletition"，我需要从app-form-field 自动访问该指令的引用。

我该怎么做？

Answer 1

你可以通过类名而不是给定名来访问它

  // assuming a directive like so
  @Directive({...})
  class AutoCompleteDirective {...}
 
  // in the component
  @ContentChild(AutoCompleteDirective)
  directive!: AutoCompleteDirective;