Question

我需要通过模板文件将html Elements传递到自定义创建的组件中。假设我有一个名为<app-card></app-card>的组件，该组件代表具有特定样式的Card布局，但是我不想每次需要时都从头开始创建此组件。因此，我认为这是个很好的方法，为此元素创建一个自定义UI组件。但是现在，当我使用此组件时，我想将其他html元素传递给它，例如H2和一些p标签：

<app-card>
  <h2>New child I passed</h2>
  <p>And another one</p>
</app-card>

当我测试它时，这种方式将行不通。有谁知道我如何实现嵌套的组件？

非常感谢您！

Answer 1

ng-content将有助于创建可配置的组件。您需要在应用卡组件内部使用。放置在应用卡开头和结尾标签内的内容将投射在

中

应用卡组件

dags

自定义组件

<div>
    <ng-content></ng-content>
</div>

此处h2和p标签将在ng-content内呈现。有关更多信息，请搜索角投影内容

Answer 2

您需要在自定义组件中使用ng-content才能使其正常工作。

app-card.component.html：

<div>
  <ng-content></ng-content>
</div>

然后，您可以根据需要使用它：

<app-card>
  <h2>New child I passed</h2>
  <p>And another one</p>
</app-card>

如果需要，可以更进一步：

<div>
    <div class="head">
        <ng-content select="h1"></ng-content>
    </div>
    <div class="body">
        <ng-content select="div"></ng-content>
    </div>
    <div class="footer">
        <ng-content></ng-content>
    </div>
</div>

然后您可以像这样使用它：

<app-card>
    <h1>My card title</h1>
    <div>My special div</div>
    <span>All the rest which doesn't belong to a special selector goes into the default ng-content</span>
</app-card>

希望这会有所帮助。

如何将html元素注入自定义组件

2 个答案: