Angular动态添加css样式

时间:2018-02-16 14:22:17

标签: javascript css angular

如何使用angular?

动态添加动态css类

我想从后端样式属性(即widthheight)获取并从此属性css样式创建。

所以,在css中我会class="testClass", "testClass"包含从后端收到的属性。

这可能吗?

1 个答案:

答案 0 :(得分:2)

是。您正在寻找[ngClass],其工作原理如下:

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

或者您也可以这样做:

<some-element [ngClass]="getClass()">...</some-element>


getClass() {

 return this.http.get.....
}

并返回一个字符串。或者你可以只分配一个变量。它适应大多数情况非常灵活。但你不会返回属性&#34;。你要做的是返回一个具有你想要的属性的类。要设置特定属性,我建议使用Renderer2:

import { Renderer2 } from '@angular/core';

其中包含setStyle方法:

this.renderer2.setStyle('your element', style: string (such as width), value: any (such as 32px));