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

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 条目。基本上它是角度的 Transclusion 概念。

有关更多详细信息，请阅读此处