如何有角度的包装组件？

Question

我有带有表单和几个表格的功能组件。我想要一个包装器组件，可以在包装器组件中的功能组件包装中使用它。详细来说，

在包装器组件中，我的wrapper.component.html 将只有一个带有一些类的div。

     <div class="something"></div>

在功能组件中，feature.component.html 将为：

     <my-wrapper>
        <div>with some data</div>
        <form></form>
     </my-wrapper>

但是我的包装器中的内容没有被加载。你能帮我吗？

Answer 1

这是一个带有“包装器”组件的工作 stackblitz。它是一个带有类的 div（以及用于演示目的的红色边框样式），以及如何在 AppComponent 中使用它的示例。

https://stackblitz.com/edit/angular-ivy-c6trj9

包装组件模板

<div class="some-wrapper" style="border: 1px solid red">
<ng-content></ng-content>
</div>

新包装器组件的使用示例（app-wrapper 是 Angular cli 默认给出的标签名称，您可以在组件中更改它）

<h1>Wrapper component example</h1>
 <app-wrapper>
    <div>with some data</div>
    <form></form>
</app-wrapper>