重用 Angular 组件（但修改 Dom 元素）

Question

所以，我创建了一个 Angular 组件，我想在我将要创建的一些页面中重用它。本质上，它是一个具有不同配置（输入字段、按钮、复选框等）的表单框。基于某些部分，我想更改表单框的内容，但是，我仍然希望保持表单的相同布局。因此，例如，我想应用表单的相同 CSS 属性以及相对于整个页面的表单。

对于我正在构建的应用程序的某些页面，我重复使用相同的表单 3 或 4 次，但是，我更改了每个表单实例中的内容。我希望能够调用选择器（），但我希望能够更改该选择器中的内容。这样可以更快地创建应用程序。

表单的内容（如输入字段和按钮）放置在不同的组件中。我想在表单组件的一个实例中插入一个特定的内容组件。然后在表单组件的另一个实例中插入另一个内容组件。

有什么简单的方法吗？任何帮助或指导将不胜感激。

This picture is a mock-up of what ideally I want a page to look like. The first form has somewhat different content, but essentially the same component with some adjustments.

Answer 1

我觉得您尝试做的事情很快就会变得一团糟，但您可以使用 inputs 来更改表单的行为。

例如，如果你想在表单中隐藏或显示一个文本框，你可以有

<input type="text" *ngIf="showTextbox" /> 

在你的 html 和

@Input() showTextbox : boolean = true; // Defaulted to true

然后指定是否每次使用该组件时都需要该文本框。