角度2+组件交叉与父子组件

Question

我刚刚了解了Angular中的transclusion，但我不知道在哪个场景中使用它会很好，也不知道它的用途是什么。

如果有什么不同？或者也许使用其中一个是一个好的做法？或者你为什么要使用transclusion？

假设我有这个组件，为什么我要将数据传入其中，而不是只在其中写入：场景1:

import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div class="my-component">
'My component works!'
</div>
`
})
export class MyComponent {}

场景2(集群(：

import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div class="my-component">
<ng-content></ng-content>
</div>
`
})
export class MyComponent {}

以及应用程序组件

<div class="app">
<my-component>
'My component works!'
</my-component>
</div>

它将与子-父组件类似

<div class="my-component">
<child-component></child-component>
</div>

与

父组件：

<div class="my-component">
<ng-content></ng-content>
</div>

应用程序组件：

<div class="app">
<my-component>
<child-component></child-component>
</my-component>
</div>

Answer 1

这是一个很好的问题，使用Angular的时间越长，问题就越明显。记住，组件的存在是为了划分行为，值得思考的是你将哪种行为划分开来。

假设你想在你的应用程序中输入名字，并且你总是希望这些名字以同样的方式出现并与你的用户交互。在这种情况下，创建一个名称组件是有意义的，该组件在任何地方都以相同的方式输入名称，并且需要该名称的表单不需要关心名称是如何呈现或收集的。在这种情况下，孩子完全封装自己的行为(以及所有孩子的行为(的父子关系是有意义的。

相反，让我们假设您想要创建一张内容可变的卡片。你知道你希望边框总是一样的，标题是一样的字体，填充是一样的。但是中间的东西会改变，这与卡片的样式无关。这是一个绝佳的机会。您创建的组件封装了一组特定的样式和行为，同时对传递到其中的内容不可知。如果您想将输入放入卡中，父级可以这样做，并将输入直接绑定到自己的表单中，而不是仅为这种情况创建新的子级。

总之，transclusion让您有机会以灵活的方式重用组件，以低成本的方式保持某些行为和样式的一致性。传统的无交叉的父子关系允许您完全封装特定(和确定性(行为，以便父级可以在完全不了解其任何内容的情况下使用