ng-content 选择不起作用“<元素> 不是已知元素”

Question

我正在关注本教程，如下所示：

<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 class 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>

应用程序自动完成.html

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