我们正在创建一个包含许多卡片的应用程序（想象一个带有便签的板子）。这些卡片将有一些共同的行为：标题的相同逻辑、“分配给”功能、最大化/折叠能力等。但是，这些卡片的内容可能不同：文本、图片、ag-Grid、自定义组件等。
我面向后端的第一件事是使用这样的模板创建一个父 Card 类：
<h2>Card header and shared elements</h2>
<cardContent></cardContent>
cardContent 将被实际内容替换。然后将此类扩展为PictureCard、TextCard 等，并以某种方式传递/设置cardContent。
你会如何在 Angular 中做到这一点？这是错误的做法吗？
【问题讨论】：
标签： angular architecture
您想使用以前称为嵌入的内容投影。
通过内容投影，你基本上有一些共同的元素，但也可以传递一些额外的内容，无论你喜欢什么内容。
它的工作原理是这样的（我们称这个组件为 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 card：
https://www.primefaces.org/primeng/#/card
有很多库可供选择！ primeng 是领导者之一。
【讨论】：