Question

我正在尝试创建某种父组件，它为我的所有组件提供了一些通用外观和逻辑，但我可以在其中编写一些特定的逻辑和模板。

看看这些图片：

这两个组件都具有相同的特征：上部带有标题和“隐藏/显示”按钮，然后是两个不同的“主体”。他们也分享了这个编辑按钮，但我的想法是让“身体”部分完全动态：这是我想用我的实现组件覆盖的组件的一部分。

换句话说：我想用包含模板的Typescript创建一个抽象类：矩形，标题和正文，标题（我想从子类中覆盖）。然后，“body”将填充子类提供的模板。

如何在Angular中实现？到目前为止，我只看到完全覆盖父组件模板的方法，而不是与另一组模板完全匹配。我想必须有一种方法可以在组件中插入带有Angular指令的HTML代码......

事情是，这是什么？

谢谢！

Answer 1

假设您将组件命名为CardComponent，而您的选择器为app-card。

标题

您可以简单地使用@Input（）组件装饰器来获取标题字符串并在通用CardComponent中使用它，请参阅角度文档：https://angular.io/guide/component-interaction

身体：

您可以创建包含标题和编辑按钮的组件，然后使用<ng-content>标记获取组件选择器内的内容，例如：

<h2>{{title}}</h2>
<ng-content></ng-content>
<button>Edit</button>

所以你可以像这样使用你的卡组件：

<app-card [title]="Channel select">
    <!-- Insert your body html -->
</app-card>