角度材质组件自定义属性

Question

我创建了一个组件，其唯一目的是显示给定调色板的调色板色调（主要，次要，重音，强调，警告）

我想允许使用指定为的组件模板（my-color-palette-component）和颜色属性（primary，secondary，accent等）将组件添加到任何页面：

<div class={{this.color?}}>
  ...markup
</div>

如何检索color属性的值并将其作为class属性插入component.html？

示例，在我的my-color-palette-component.component.html代码中：

<div class="primary">...markup</div>

这样DOM标记就变成了：

{{1}}

Answer 1

首先，您必须在组件中声明变量color并将其标记为input（如果您还没有这样做）：

@Input() public color:string; //Remove the typings in case you're not using typescript

之后你可以简单地设置类属性：

<div [class]="color">...markup</div>

需要注意的一点是，您将完全override a class attribute直接在模板中设置：

<div class="someOtherClass" [class]="color">...markup</div>

假设color的值为primary，则会产生以下结果：

<div class="primary">...</div>

在这种情况下，您可以使用ngClass：

<div class="someOtherClass" [ngClass]="color">...markup</div>