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