angular - 什么是 Angular 嵌入？

Question

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

Answer 1

嵌入是一个概念，可让您在组件内创建内容槽/ 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

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

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

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