是否向自定义Angular组件添加类？

Question

我试图允许用户向子组件的外部HTML添加任意数量的类。因此，可以说有一个名为app-button的组件，带有类似html的

app-button.component.html

<button
[ngClass] = {"..."}
[class] = "static classes"
>
{{text}}
</button>

我希望用户能够向此应用程序按钮选择器添加任意数量的类，这样它将为按钮标签添加类。

例如，在父组件中，如果用户这样做：

parent.component.html

<app-button class = "user-class1 user-class2 ..." >
</app-button>

我希望应用程序按钮的HTML像这样结束：

<button
[ngClass] = {"..."}
[class] = "static classes user-class1 user-class2"
>
{{text}}
</button>

我需要某种方式来做到这一点，以便它并非特定于任何类名，而是适用于用户想要添加的任何类。

Answer 1

app-button.component.ts

在组件类中添加myClasses输入变量。

@Input() myClasses;

app-button.component.html

<button [ngClass]="myClasses" class = "static classes">
  {{text}}
</button>

parent.component.ts

为动态CSS类创建一个数组。

classes = ['a', 'b', 'c'];

parent.component.html

将您的类数组传递到应用程序按钮组件中。

<app-button [myClasses]="classes">
</app-button>