Angular 模板继承和/或组合

我们正在创建一个由许多卡片组成的应用程序（想象一个带有便签的板）。这些卡将具有一些共享行为：标题逻辑相同、“分配给”功能、最大化/折叠功能等。但是，这些卡的内容可能不同：文本、图片、ag网格、自定义组件等

我首先想到的是使用如下模板创建一个父卡类：

<h2>Card header and shared elements</h2>
<cardContent></cardContent>

<fred [title]="i will appear as title">
  <div>I will be displayed where ng-content is</div>
  <p>i can be anything you want</p>
</fred>

<fred [title]="i will appear as a different title">
  <a-different-component></a-different-component>
</fred>

卡头和共享元素

其中，

cardContent

将被实际内容替换。然后将该类扩展为

PictureCard

，

TextCard

等，并以某种方式传递/设置

cardContent

---

你会怎么做呢？这是一种错误的方法吗？

您想使用以前称为转换的内容投影

使用内容投影，您基本上有一些公共元素，但也可以传入一些附加内容，无论您喜欢什么内容

它的工作原理如下（我们将此组件称为fred）：

这里我们使用fred两次，传递完全不同的内容

以下是一个教程：

对于许多结构相同的自定义模态，这是一种常见的方法，例如模态标题、模态页脚等，但模态正文的内容每次都不同

很抱歉，在这个网站上找不到官方文档，但是这个链接很好

角度内容投影的好处在于，您可以有多个内容槽，这意味着您可以根据需要投影到多个位置。这使得Angular content projection成为最强大的内容投影系统#对此有何反应

说到这里，您可能希望使用一些现成的库解决方案，如primeng card：

---

有很多LIB可供选择！普雷明是领导者之一。

谢谢你，@danday74！我想这正是我需要的。

<fred [title]="i will appear as title">
  <div>I will be displayed where ng-content is</div>
  <p>i can be anything you want</p>
</fred>

<fred [title]="i will appear as a different title">
  <a-different-component></a-different-component>
</fred>