Angular 17多内容投影错误

发布于12月29日

我正在从新的Angular 17文档中学习Angular 多内容投影. 当我使用文档中的示例时，我收到错误:

配置文件.组件.html::

<div class="red">
  <ng-content select="profile-header"></ng-content>
</div>

<div class="green">
  <ng-content></ng-content>
</div>

<div class="blue">
  <ng-content select="profile-footer"></ng-content>
</div>

在app.component.html::

<app-profile>
    <profile-header><h2>Header 1</h2></profile-header>
    <p>This is projected content</p>
</app-profile>

我收到此错误::

NG8001: 'profile-header' is not a known element:

我怎么才能解决它呢？

推荐答案

SELECT等同于javascript查询 Select 器([<<attribute name>>])，因此您可以这样做属性 Select 器.

App.component.html

<app-profile>
    <h2 header>Header 1</h2>
    <p>This is projected content</p>
    <h2 footer>Footer 1</h2>
</app-profile>

Profile.Component.html:

<div class="red">
  <ng-content select="[header]"></ng-content>
</div>

<div class="green">
  <ng-content></ng-content>
</div>

<div class="blue">
  <ng-content select="[footer]"></ng-content>
</div>

docs here