Angular 4 設置組件樣式的幾種方式

  你用Angular嗎？

一.介紹

  如何只改動最簡單的css代碼，呈現徹底不同的視圖效果。

第一種：最基本的設置：

  圖1 代碼

 

圖2 界面運行效果圖

日常，想給一個label或者p等標籤添加樣式，咱們就是這樣操做，在Angular中也是同樣的。

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

這時候就要用到ElementRef 和Renderer2了。能夠去Angular 官網裏搜索喲。

  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 或前端技術喲。