你用Angular嗎？

一.介紹

  如何只改動(dòng)最簡(jiǎn)單的css代碼，呈現(xiàn)完全不一樣的視圖效果。

第一種：最基本的設(shè)置：

  圖1 代碼

圖2 界面運(yùn)行效果圖

平常，想給一個(gè)label或者p等標(biāo)簽添加樣式，我們就是這樣操作，在Angular中也是一樣的。

現(xiàn)在，如果我想要將字體換成紅色呢，首先想到的就是去修改.label里的color屬性值，可如果樣式表是封裝的或者外部引用的，不方便修改呢？

這時(shí)候就要用到ElementRef 和Renderer2了。可以去Angular 官網(wǎng)里搜索喲。

  renderer.class 圖

我們可以這樣用：

  label.html

  label.ts

當(dāng)然ElementRef和renderer2都引用自@angular/core庫(kù)里面的。 至于ViewChild 和ngAfterViewInit()可以自行去了解。

    修改效果圖

   當(dāng)然，你說(shuō)這樣修改的弊端有沒(méi)有呢？肯定是有的，因?yàn)椋瑃his.el.nativeElement獲取的是當(dāng)前元素，如果用*ngFor生成了一系列的label的話(huà)，它只會(huì)給你修改第一個(gè)label的。那有沒(méi)有其他的辦法可以修改呢。當(dāng)然也是有的！

我們可以獲取到元素的節(jié)點(diǎn)進(jìn)行操作?

  label.ts

獲取元素節(jié)點(diǎn)，還是用上面的elementref。 如果要改變所有的，F(xiàn)or循環(huán)皆可以啦。

可是，這樣做又有問(wèn)題了？如果想不同的label不同字體顏色怎么辦呢？

當(dāng)然Angular也提供了方法呀？ ngStyle和ngClass可以用呀！

 ngStyle

[ngStyle]="{color:'  '}"  和[style.color]是一樣的意思。

你的label想變成什么顏色，你就給我傳那個(gè)值進(jìn)來(lái)，0就是green......

這種適用于只需要修改少量屬性的標(biāo)簽。

如果你需要修改顏色，字體大小，間距....這種方式顯然太繁瑣，這時(shí)候ngclass就來(lái)了。

 ngclass

注意ngClass后面的字樣。label為什么沒(méi)有用單引號(hào)呢，而后面的text-primary卻有呢？

1.label是一個(gè)變量，我們的樣式是可以傳參的。

也就是你的html標(biāo)簽不需要改動(dòng)，需要什么樣式就在ts離傳入即可。ngClass也可以利用這個(gè)特性去修改。

其實(shí)這幾種用的地方也挺多的，不過(guò)得根據(jù)實(shí)際需求去采用不同形式。

歡迎來(lái)找我交流Angular 或前端技術(shù)喲。