ng-content select 不工作“<element> 不是已知元素”

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>

但我得到

Uncaught Error: Template parse errors: 'app-autocomplete-input' is not a known element:

If 'app-autocomplete-input' is an Angular component, then verify that it is part of this module.

If 'app-autocomplete-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] ...

而且我不太明白这里的问题是什么。

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

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

Answer 1

Objective

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

Issue

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

Fix

因为您没有自定义组件并且从未打算拥有自定义组件。您可以使用简单的 html 标签，例如 div span 或者您可以使用 css class ex autocomplete-input.

Modified code

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

应用-autocomplete.html

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

ng-content select 不工作“<element> 不是已知元素”

ng-content select not working "<element> is not a known element"

angular

ng-content

Objective

Issue

Fix

Modified code

应用-autocomplete.html