Angular 2+ 组件嵌入 vs 父子组件

Question

我刚刚在 Angular 中了解了嵌入，但我不知道在什么情况下使用它会很好，或者它的用途是什么。

有什么不同吗？或者使用其中一个可能是一个好习惯？或者你为什么要使用嵌入？

假设我有这个组件，为什么我要将数据嵌入其中而不是将其写入其中：场景 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 上的时间越多，它就会成为 apparent。记住组件的存在是为了划分行为，值得考虑划分哪种行为。

假设您想在您的应用中输入姓名，并且始终希望这些姓名以相同的方式出现并与您的用户互动。在这种情况下，创建一个在任何地方都以相同方式输入名称的名称组件是有意义的，并且需要名称的表单永远不需要关心名称是如何呈现或收集的。在这种情况下，parent-child 关系，其中 child 完全封装了它自己的行为（以及所有 child 行为）是有意义的。

相反，假设您要创建一张内容可变的卡片。您知道您希望边框始终相同，标题具有相同的字体，填充也相同。但是中间的东西会改变，这与卡片的样式无关紧要。这是嵌入的绝佳机会。您创建一个组件，它封装了一组特定的样式和行为，同时对传递给它的内容是不可知的。如果您想将输入放入卡片，parent 可以这样做并将该输入直接绑定到它自己的表格中，而不是为这种情况创建一个新的 child。

总而言之 - 嵌入使您有机会以灵活的方式重用组件，以省力的方式保持某些行为和样式的一致性。传统的 parent-child 无嵌入关系允许您完全封装特定（和确定性）行为，以便 parent 可以在完全不知道其任何内容的情况下使用它

Angular 2+ 组件嵌入 vs 父子组件

Angular 2+ component transclusion vs Parent-Child components

parent-child

transclusion

angular