如何将子节点传递给 angular 组件？

Question

我想重复使用我的 angular 5 组件的重复模式。

向组件传递一些字符串值很容易，我写道：

<my-component attribute1="bla" attribute2="foo"></my-component>

结合：

@Component({
    selector: 'my-component', ...
})
export class MyComponent {
    @Input() attribute1: string;
    @Input() attribute2: string;
}

现在，我想将模板片段传递给组件。理想情况下，我会得到这样的结果：

<my-component attribute1="bla" attribute2="foo">
    <h1>My Content</h1>
    <p>Some text<span *ng-if="important"> !!!</span></p>
</my-component>

<!-- and at some other place -->
<my-component attribute1="blubb" attribute2="blubber">
    <img src="../gala.png"/>
</my-component>

如何在我自己的组件中接收和使用那些嵌套模板/dom 条目？

Answer 1

您可以使用 <ng-content></ng-content> 在我的组件中获取嵌套模板/dom 条目。基本上它在 angular.

的 Transclusion 概念中

更多细节read out here

如何将子节点传递给 angular 组件？

How to pass child nodes to an angular component?

angular-components

angular