模板继承和/或组合
我们正在创建一个由许多卡片组成的应用程序(想象一下有粘性笔记的板)。这些卡片将有一些共享行为:相同的标题逻辑，“分配到”功能，最大化/折叠能力等。然而，这些卡的内容可能有所不同:文本、图片、ag-Grid、自定义组件等。
在我面向后端的思想中，第一件事是创建一个带有如下模板的家长卡片类：
<h2>Card header and shared elements</h2>
<cardContent></cardContent>其中cardContent将被实际内容所取代。然后对PictureCard、TextCard等类进行扩展，并以某种方式传递/设置cardContent。
你怎么用角度来做这个？这是错误的做法吗？
回答 1
Stack Overflow用户
发布于 2018-10-09 16:26:25
您想要使用内容投影，这以前被称为“屏蔽”。
使用内容投影，您基本上有一些共同的元素，但也可以传递一些额外的内容，任何您喜欢的内容。
它的工作方式如下(我们将此组件称为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>在这里，我们使用弗雷德两次，传递完全不同的内容。
这里有一个教程：
https://codecraft.tv/courses/angular/components/content-projection/
这是自定义模态的一种常见方法，其中许多结构是相同的，例如模态标题、模态页脚等，但是模态体的内容每次都不同。
对不起，找不到这上面的官方文档，但是这个链接很好。
关于角度内容投影的好处是，您可以有多个内容插槽，这意味着您可以投影到多个地方，如果需要的话。这使得角内容投影成为最强大的内容投影系统。#反应，坎特，披头士
说完这些之后，您可能需要使用一些开箱即用的库解决方案，如primeng卡：
https://www.primefaces.org/primeng/#/card
有很多小人可以选择！报春花是其中的领导者之一。
https://stackoverflow.com/questions/52725384
复制相似问题
腾讯云开发者
