Angular的投影技术

在 Angular 中，投影（Projection）是一种将组件的内容插入到另一个组件中的技术，也被称为内容投影（Content Projection）或插槽（Slot）。通过投影，我们可以将一个组件的内容插入到另一个组件中，从而实现组件的复用和组合。

当一个组件需要接受来自外部的内容时，可以使用投影来实现。下面是一个简单的例子：

假设有一个 card 组件，用于显示一个带有标题和内容的卡片。我们希望这个组件的标题和内容可以从外部传入，而不是在组件内部写死。可以使用投影来实现这个功能。

首先，在 card 组件的模板中，使用 <ng-content> 元素来表示卡片的内容和标题将要被插入的位置：

<!-- card.component.html -->
<div class="card">
  <div class="card-header">
    <h3><ng-content select="[card-title]"></ng-content></h3>
  </div>
  <div class="card-body">
    <ng-content select="[card-content]"></ng-content>
  </div>
</div>

在上面的代码中，我们使用 [card-title] 和 [card-content] 属性来标识卡片的标题和内容。这样，在外部使用 card 组件时，就可以将标题和内容插入到对应的位置。

例如，下面是一个使用 card 组件的示例：

<!-- app.component.html -->
<app-card>
  <h4 card-title>My Card Title</h4>
  <p card-content>This is my card content.</p>
</app-card>

在上面的代码中，我们使用 card-title 和 card-content 属性来标识卡片的标题和内容，并将它们插入到 card 组件中。通过这种方式，我们就可以在外部控制 card 组件的标题和内容，从而实现了组件的复用和组合。

需要注意的是，<ng-content> 元素可以使用 select 属性来选择要插入的内容。在上面的示例中，我们使用 [card-title] 和 [card-content] 属性来选择要插入的内容，这样可以避免将不需要的内容插入到组件中。