一.介紹
? 如何只改動(dòng)最簡單的css代碼，呈現(xiàn)完全不一樣的視圖效果。
第一種：最基本的設(shè)置：
平常，想給一個(gè)label或者p等標(biāo)簽添加樣式，我們就是這樣操作，在Angular中也是一樣的。
現(xiàn)在，如果我想要將字體換成紅色呢，首先想到的就是去修改.label里的color屬性值，可如果樣式表是封裝的或者外部引用的，不方便修改呢？
這時(shí)候就要用到ElementRef 和Renderer2了?？梢匀ngular 官網(wǎng)里搜索喲。
我們可以這樣用：
??
當(dāng)然ElementRef和renderer2都引用自@angular/core庫里面的。 至于ViewChild 和ngAfterViewInit()可以自行去了解。
?? 當(dāng)然，你說這樣修改的弊端有沒有呢？肯定是有的，因?yàn)?，this.el.nativeElement獲取的是當(dāng)前元素，如果用*ngFor生成了一系列的label的話，它只會(huì)給你修改第一個(gè)label的。那有沒有其他的辦法可以修改呢。當(dāng)然也是有的！
我們可以獲取到元素的節(jié)點(diǎn)進(jìn)行操作?
獲取元素節(jié)點(diǎn)，還是用上面的elementref。 如果要改變所有的，F(xiàn)or循環(huán)皆可以啦。
可是，這樣做又有問題了？如果想不同的label不同字體顏色怎么辦呢？
當(dāng)然Angular也提供了方法呀？ ngStyle和ngClass可以用呀！
[ngStyle]="{color:'? '}"? 和[style.color]是一樣的意思。
你的label想變成什么顏色，你就給我傳那個(gè)值進(jìn)來，0就是green......
這種適用于只需要修改少量屬性的標(biāo)簽。
如果你需要修改顏色，字體大小，間距....這種方式顯然太繁瑣，這時(shí)候ngclass就來了。
注意ngClass后面的字樣。label為什么沒有用單引號(hào)呢，而后面的text-primary卻有呢？
1.label是一個(gè)變量，我們的樣式是可以傳參的。
也就是你的html標(biāo)簽不需要改動(dòng)，需要什么樣式就在ts離傳入即可。ngClass也可以利用這個(gè)特性去修改。
其實(shí)這幾種用的地方也挺多的，不過得根據(jù)實(shí)際需求去采用不同形式。
歡迎來找我交流Angular 或前端技術(shù)喲。
