angular 控件css_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 或前端技术哟。

angular 控件css_Angular 4 设置组件样式的几种方式相关推荐

JS设置CSS样式的几种方式（js设置!important）
JS设置CSS样式的几种方式(js设置!important) x619y 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效 ...
JS设置CSS样式的几种方式
JS设置CSS样式的几种方式 1.直接设置style的属性某些情况下用这个设置!import值无效如果属性有"-"号,就需要使用驼峰命名法(如textAlign),如果想保留& ...
html js 设置样式,原生js设置样式笔记：JS设置CSS样式的几种方式
document(id名).style.backgroundColor = "ren" css里的属性有-的就去掉将首字母大写. js如何添加CSS样式中的class添加属性用J ...
用JS来动态设置CSS样式的八种方式
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无 ...
angular 控件css_Angular父组件内修改子组件的样式
在使用NG-ZORRO组件的过程中,需要根据产品的需要,在某些页面修改某些NZ组件的样式.但是由于angular默认采用了Emulated的视图封装模式,导致即便我们想在父组件中直接去重写子组件的样式 ...
flex html 控件开源,flexlib开源组件库
ComponentList FlexLib组件列表. FlexLib组件列表本wiki页面包含了在当前构建的flexlib中所有组件的列表.添加新组件FlexLib之后,你应该编辑这个页面,填写组件 ...
WPF RadioButton按钮控件取消选中设置
WPF RadioButton按钮控件取消选中设置通常我们使用的RadioButton控件选中之后就不能进行取消选中的操作,我上网查找到了解决方法,如下: 首先我们在View视图这里写这个按钮的点击 ...
c# chart控件的坐标设置Minimum和Maximum固定值之后，切换成自动模式的程序
c# chart控件的坐标设置Minimum和Maximum固定值之后,切换成自动模式的程序 c# chart控件的坐标通过chart1.ChartAreas["ChartArea1&quo ...
WPF中通过控件Margin属性设置控件位置
WPF中通过控件Margin属性设置控件位置一.Margin属性简介二.Margin在cs文件中定义三.Margin设置控件位置四.参考文档一.Margin属性简介在使用WPF进行页面设计 ...

angular 控件css_Angular 4 设置组件样式的几种方式

angular 控件css_Angular 4 设置组件样式的几种方式相关推荐

最新文章

热门文章