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 或前端技术哟。