ng-content select不起作用“ <el​​ement>不是已知元素”

Question

我正在这样跟踪this tutorial：

<div class="app-autocomplete">    
  <mat-form-field>
    <mat-form-field>
      <div class="app-autocomplete-input">
        <ng-content select="app-autocomplete-input"></ng-content>
      </div>
    </mat-form-field>
    <button mat-icon-button type="button" [disabled]="disabled">
      <mat-icon>clear</mat-icon>
    </button>
  </mat-form-field>

  <!-- ... --> 
</div>

但是我得到

  

未捕获的错误：模板解析错误：   “ app-autocomplete-input”不是已知元素：

     

    

    
1. 如果“ app-autocomplete-input”是Angular组件，则请验证它是否属于此模块。
    
2. 如果“ app-autocomplete-input”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 （“               [错误->]                                     ...
    

  

，我不太了解这里的问题。

这就是我尝试使用app-autocomplete的方式：

<app-autocomplete>          
  <app-autocomplete-input>
    <input placeholder="Yo"/>
  </app-autocomplete-input>          
</app-autocomplete>

Answer 1

  

客观

您的实际目标是在使用时利用Content Projection进一步自定义组件。

  

问题

主要问题是使用未在任何地方提供的自定义组件app-autocomplete-input。

  

修复

因为您没有自定义组件，也从不打算拥有自定义组件。您可以使用简单的HTML标记，例如div span，也可以使用CSS类ex autocomplete-input。

  

修改后的代码

<div class="app-autocomplete">    
  <mat-form-field>
    <mat-form-field>
      <div class="app-autocomplete-input">
        <ng-content select=".app-autocomplete-input"></ng-content>
      </div>
    </mat-form-field>
    <button mat-icon-button type="button" [disabled]="disabled">
      <mat-icon>clear</mat-icon>
    </button>
  </mat-form-field>

  <!-- ... --> 
</div>

app-autocomplete.html

<app-autocomplete>          
  <div class="app-autocomplete-input">
    <input placeholder="Yo"/>
  </div>          
</app-autocomplete>