你用Angular嗎？

一.介紹

如何只改動最簡單的css代碼，呈現完全不一樣的視圖效果。

第一種：最基本的設置：

圖1 代碼

圖2 界面運行效果圖

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

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

這時候就要用到ElementRef 和Renderer2了?？梢匀ngular 官網里搜索喲。

renderer.class 圖

我們可以這樣用：

label.html

label.ts

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

修改效果圖

當然，你說這樣修改的弊端有沒有呢？肯定是有的，因為，this.el.nativeElement獲取的是當前元素，如果用*ngFor生成了一系列的label的話，它只會給你修改第一個label的。那有沒有其他的辦法可以修改呢。當然也是有的！

我們可以獲取到元素的節點進行操作?

label.ts

獲取元素節點，還是用上面的elementref。 如果要改變所有的，For循環皆可以啦。

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

當然Angular也提供了方法呀？ ngStyle和ngClass可以用呀！

ngStyle

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

你的label想變成什么顏色，你就給我傳那個值進來，0就是green......

這種適用于只需要修改少量屬性的標簽。

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

ngclass

注意ngClass后面的字樣。label為什么沒有用單引號呢，而后面的text-primary卻有呢？

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

也就是你的html標簽不需要改動，需要什么樣式就在ts離傳入即可。ngClass也可以利用這個特性去修改。

其實這幾種用的地方也挺多的，不過得根據實際需求去采用不同形式。

歡迎來找我交流Angular 或前端技術喲。

總結

以上是生活随笔為你收集整理的angular 控件css_Angular 4 设置组件样式的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。