如何在 Angular 中为常见的组合实例设置不同的样式?

Question

我有一个名为数量组件的组件，它是一个共享库，我想在多个地方使用该组件，我想为该组件提供与我使用它的地方不同的样式。如何在角度中实现它？

PS：数量组件，需要背景样式，h2，按钮。

Answer 1

您可以通过使用 @Input() 装饰器添加输入属性来为account-component提供自定义样式，并根据打开该组件的位置将样式或类名传递给该组件。 然后，您可以使用 ngClass 或 ngStyle 将这些样式应用于您的组件。

例如，在您的帐户组件中：

export class AccountComponent implements OnInit {
@Input() customClass: string;
}

帐户组件 HMTL

<div [ngClass]="customClass"> <h1>Account Component</h1> </div>

帐户组件 CSS

customClassRed:{
color: red;
}
customClassBlue:{
color: blue;
}

在你打开帐户组件的组件中，只需传递类名(如果你使用类名，那么你需要在你的组件中带有样式的类.css就像我上面所做的那样)或样式，具体取决于你的喜好

另一个组件

<account-component [customClass]="customClassBlue"> </account-component>