[
关注
6月15日
-
4分钟阅读
Angular:从父组件到子组件传递模板的3种方式，促进重用性
我在下面创建了一个小例子，来演示我经常使用的从父组件到子组件传递模板的3种方式。这是很基本的，而应用程序中的实际情况可能要复杂得多。
引导的AppComponent 承载了3个子组件。ChildAComponent、ChildBComponent、ChildCComponent
每个组件都展示了1种从父组件到子组件传递模板的方法。
- 使用@Input()属性绑定来传递模板。
就像你从父组件向子组件传递数据一样，你也可以使用属性绑定来传递模板引用，并在子组件中轻松访问它们。
由于AppComponent模板 包含了所有的3种方法，为了避免混淆，让我现在只向你展示第一个方法的要点。
我们已经创建了一个模板**#temp**，它接受一个本地变量数据。 这个本地变量数据的目的是为了在父子组件中重复使用相同的模板和不同的数据。
这个数据 被反复使用，以创建如下的多个盒子结构。ChildAComponent 是这个数据的来源。
方法1
正如你所看到的，我们已经通过属性绑定将模板参考Temp 传递给ChildAComponent 。
<app-child-a [temp]=”temp”> </app-child-a>
ChildAComponent类。我 们定义了属性**@Input() temp**，它包含了模板参考，我们还定义了数据 ，这些数据 将在模板中用于构建上面显示的多框结构。
ChildAComponent模板。正 如你所看到的，我们已经将模板参考变量传递给ngTemplateOutlet ，数据 被传递给ngTemplateOutletContext 以在模板中显示。
<ng-container [ngTemplateOutlet]=”temp” [ngTemplateOutletContext]=”{ data: data }”></ng-container>
2.2.使用内容投影来传递模板。
下面是AppComponent模板的要点，它只显示了第2种方法。我使用了ChildBComponent 来演示这个方法。
方法2
最终结果如上。我们在之间传递了一个带有参考Temp2 的模板，模板的数据 来源是ChildBComponent。
请注意，将放在中并不限制它只在ChildBComponent中使用**。同样的模板也可以使用ngTemplateOutlet和ngTemplateOutletContext在父级AppComponent的任何地方轻松地重用**。
ChildBComponent类。
@ContentChild('temp2') temp2: TemplateRef<any>;
我们使用**@ContentChild()**来访问投影内容，即。
ChildBComponent模板。这 是很直接的。只需将通过**@ContentChild()访问的模板参考Temp2** 传递给ngTemplateOutlet ，并将模板中要显示的数据传递给ngTemplateOutletContext。
<ng-container[ngTemplateOutlet]="temp2"[ngTemplateOutletContext]="{ data: 'Its a pretty template' }"></ng-container>
3.使用内容投影和来传递模板
以上2种方法通常可以解决大部分的用例。
第三种方法也是使用内容投影，但不同的是我不会把里面包裹的html从父组件传给子组件。相反，我将直接把HTML从父组件传给子组件。
让我们看看这是如何工作的。
下面是AppComponent模板的要点，只显示了第三种方法，以避免混淆。ChildCComponent 被用来演示这个方法。
你可以看到我们在之间传递了一个
和一个标签。
我们在这里有2个选项。单槽投射和多槽投射。
在单槽投影 中**，** 将有一个单一的元素，即单槽，所有的内容，即
和
标签将被投影到这个单一的槽，即元素。在 多槽投影中，可以有1个以上的元素，即多个槽，我们可以决定哪个内容将出现在ChildCComponent的哪个槽里。CSS选择器被用于这一目的。
为了理解它是如何工作的，让我们先看看ChildCComponent模板。
<ng-content select=”h4"></ng-content>
我们在ChildCComponent的不同位置有两个标签。一个在
标签的上方，另一个在
标签的下方。
每个标签都有一个选择属性。你一定猜到了，这个属性决定哪个内容将被投射到哪个元素上。
选择="h4 " 的元素意味着使用
标签的内容将被投射到这个元素上。
带有select="button " 的元素意味着使用
标签的内容将被投射到这个元素上。你可以在下面找到整个工作实例。
[
Angular Ivy (forked) - StackBlitz
一个基于@angular/animations、@angular/compiler、@angular/core、@angular/common的angular-cli项目。
叠叠乐.com
