如何使包装组件具有角度

Question

我有一个带有表单和几个表的功能组件。我想要一个包装器组件，我可以在功能组件中使用它来包装包装器组件。具体而言，

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

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

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

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

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

Answer 1

这是一个工作堆栈litz；包装器"；组成部分它是一个带有类的div(出于演示目的，还有一个红色边框样式(，以及如何在AppComponent中使用它的示例。

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

包装组件模板

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

新包装器组件的示例用法(应用程序包装器是angular cli默认提供的标签名称，您可以在组件中更改它(

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

Answer 2

我相信您想要的是内容投影。对于最简单的情况，只需使用<ng含量>像这样的元素

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