什么是 Angular 嵌入？

Question

什么是 Angular 中的嵌入。我在 AngularJS 中找到了一些关于它的信息，但它在 Angular 中是如何工作的。 什么时候在实践中使用它？在哪些情况下使用它？

Answer 1

Transclusion 是一个概念，可让您在组件内创建内容槽/ng-content。因此，如果您有一个带有 content-slot / ng-content 的子组件，则使用该子组件的父组件可以将它想要的任何内容放入子组件的 content-slot 中。

假设您有两个这样的组件：

子组件

<div>Child start</div>
<ng-content></ng-content>
<div>Child end</div>

父组件

<div>Parent start</div>
  <app-child>
    <div>Parent middle</div>
  </app-child>
<div>Parent end</div>

它会在屏幕上呈现如下内容：

Parent start
Child start
Parent middle
Child end
Parent end

如您所见，“Parent middle”行呈现在子项的中间。这是一个非常强大的概念，让您可以创建可重用的子级，其内容由其父级决定。

如果你曾经使用过 Angular Material Card 组件，它就是一个很好的例子。卡片组件创建卡片边框并将背景设置为白色，但开发人员可以从父组件决定卡片内的内容。

另外值得一提的是，您可以在单个组件中拥有多个内容槽/ng-content，并且您可以为它们分配一个 id。通过引用 ID，您可以从父组件决定子组件内部的位置。