我们正在创建一个包含许多卡的应用程序（想象一下带有粘滞便笺的木板）。这些卡将具有一些共享的行为：标题具有相同的逻辑，“分配给”功能，最大化/折叠能力等。但是，这些卡的内容可能有所不同：文本，图片，ag-Grid，自定义组件等。 / p>
面向后端的想法首先是使用以下模板创建父Card类：
<h2>Card header and shared elements</h2>
<cardContent></cardContent>
cardContent将被实际内容替换的地方。然后将此类扩展为PictureCard，TextCard等，并以某种方式传递/设置cardContent。
您将如何在Angular中做到这一点？这是错误的方法吗？
答案 0 :(得分：0)
您要使用以前称为透明的内容投影。
通过内容投影，您基本上具有一些共同的元素，但也可以传递一些其他内容，无论您喜欢什么内容。
它的工作原理如下（我们将这个组件称为fred）：
<h2>{{title}}</h2>
<ng-content></ng-content>
标题将作为@Input传递。使用fred的组件如下所示：
<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>
我们在这里使用fred两次，传递的内容完全不同。
这是一个教程：
https://codecraft.tv/courses/angular/components/content-projection/
这是自定义模态的常用方法，其中许多结构都是相同的-例如模态标题，模态页脚等，但是模态主体的内容每次都不同。
很抱歉，此文档找不到官方文档，但是该链接很好。
关于Angular内容投影的伟大之处在于，您可以具有多个内容插槽，这意味着您可以根据需要投影到多个位置。这使得Angular内容投影成为可用的最强大的内容投影系统。 #ReactCantBeatThis
说了这么多，您可能想使用一些开箱即用的库解决方案，例如primeng卡：
https://www.primefaces.org/primeng/#/card
有很多库可供选择！ primeng是领导者之一。