Angular 2+ 组件嵌入与父子组件答案

【问题标题】：Angular 2+ component transclusion vs Parent-Child componentsAngular 2+ 组件嵌入与父子组件
【发布时间】：2022-01-14 22:04:06
【问题描述】：

我刚刚了解了 Angular 中的嵌入，但我不知道在哪种情况下使用它比较好，或者它的目的是什么。

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

假设我有这个组件，为什么我要将数据转入其中而不是仅将其写入其中：场景一：

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>

【问题讨论】：

标签： angular parent-child transclusion

【解决方案1】：

这是一个很好的问题，随着你花在 Angular 上的时间越多，这个问题就会越明显。请记住，组件的存在是为了划分行为，因此值得考虑您划分哪种行为。

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

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

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

【讨论】：