基于输入属性将类添加到组件的最佳方法是什么？

Question

我试图创建一个自定义按钮组件，并基于一个属性，我需要添加一个特定的类，例如：

<mybutton primary>Primary button</mybutton>

需要将此类添加到此组件：

.primary {
   background-color: green;
}

我正在寻找有关如何实现此目的的任何想法或教程

Answer 1

1. 当您需要在组件宿主元素上设置类
时

在下面添加到您的mybutton组件中：

import { Component, OnInit, Input, HostBinding } from '@angular/core';

...

@Input()
@HostBinding('class')
color = "primary"

这将通过color输入接受一个值，并将组件的宿主元素的类设置为传递的值。 （默认值为“主要”）

1. 当您需要在组件内部的元素上设置类
时

@Input()
color = 'primary';

<button [ngClass]="color">
   <ng-content></ng-content>
</button>

这将通过color输入传递类名，并通过button设置ngClass元素的类。

注意：

此外，如果要在组件选择器之间显示文本（例如，问题中的Primary button），还必须添加：

<ng-content></ng-content>

在您的mybutton组件html中。

演示：

https://stackblitz.com/edit/custom-attributes

Answer 2

在mybutton中添加输入属性className并传递值。

@Input() className: string;

然后将值绑定到mybutton模板中

<div [class] ="className" >Some text</div>