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

【问题标题】：ng-content select not working "<element> is not a known element"ng-content 选择不起作用“<element> 不是已知元素”
【发布时间】：2019-03-30 09:35:36
【问题描述】：

我像这样关注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' 不是已知元素：

如果“app-autocomplete-input”是一个 Angular 组件，则验证它是该模块的一部分。

如果“app-autocomplete-input”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 (" [错误->] ...

我不太明白这里有什么问题。

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

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

【问题讨论】：

您是否确保将app-autocomplete-input 组件添加到您最后一个模板声明所在的模块中（您使用<app-autocomplete-input> 标签的位置）？
您是否阅读了错误信息？ app-autocomplete-input 是否是 Angular 组件？如果是，是否在模块中声明？如果不是，它是一个 Web 组件吗？如果以上都不是，那么你就不能使用 app-autocomplete-input，因为它既不是标准的 DOM 元素，也不是 Angular 组件，也不是 Web 组件。
那你就不能用了。使用 div、span 或任何其他标准 dom 元素。
他们在您链接到的部分之前的部分中准确地说明了这种情况......“但是，如果您现在使用标签，您将遇到错误。未处理的承诺拒绝：模板解析错误：'card-body' 不是已知元素 Angular 2 无法识别 card-body 标签。card-body 既不是指令也不是组件。解决此错误的快速方法是添加架构元数据属性在您的模块中，在您的模块文件中将值设置为 NO_ERRORS_SCHEMA。"
@JBNizet 也感谢你！

标签： angular ng-content

【解决方案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>

【讨论】：