角材料成分自定義屬性

Question

我已創建我想允許該組件是其唯一的目的是要顯示給定的調色板的顏色調色板中的色彩（伯，仲，口音，強調，警告）

的成分加入到使用組件模板的任何頁（我的色調色板分量）和色彩屬性（伯，仲，重音等）指定爲：

<my-color-palette-component color="primary"></my-color-palette-component> 

如何取回色彩屬性的值和將它作爲class屬性插入到我的component.html中？

例如，在我我色調色板 - component.component.html代碼：

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

這樣的DOM標記變爲：

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

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>