分享好友 前端技术首页 频道列表

Angular 4 设置组件样式的几种方式

angular  2023-03-16 12:470
Angular 4 设置组件样式的几种方式
  你用Angular吗?

一.介绍

  如何只改动最简单的css代码,呈现完全不一样的视图效果。

第一种:最基本的设置:

Angular 4 设置组件样式的几种方式
  图1 代码

 

Angular 4 设置组件样式的几种方式
图2 界面运行效果图

平常,想给一个label或者p等标签添加样式,我们就是这样操作,在Angular中也是一样的。

现在,如果我想要将字体换成红色呢,首先想到的就是去修改.label里的color属性值,可如果样式表是封装的或者外部引用的,不方便修改呢?

这时候就要用到ElementRef 和Renderer2了。可以去Angular 官网里搜索哟。

Angular 4 设置组件样式的几种方式
  renderer.class 图

我们可以这样用:

  

Angular 4 设置组件样式的几种方式
  label.html

 

Angular 4 设置组件样式的几种方式
  label.ts

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

 

Angular 4 设置组件样式的几种方式
    修改效果图

   当然,你说这样修改的弊端有没有呢?肯定是有的,因为,this.el.nativeElement获取的是当前元素,如果用*ngFor生成了一系列的label的话,它只会给你修改第一个label的。那有没有其他的办法可以修改呢。当然也是有的!

我们可以获取到元素的节点进行操作?

Angular 4 设置组件样式的几种方式
  label.ts

获取元素节点,还是用上面的elementref。 如果要改变所有的,For循环皆可以啦。

可是,这样做又有问题了?如果想不同的label不同字体颜色怎么办呢?

当然Angular也提供了方法呀? ngStyle和ngClass可以用呀!

Angular 4 设置组件样式的几种方式
 ngStyle

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

你的label想变成什么颜色,你就给我传那个值进来,0就是green......

这种适用于只需要修改少量属性的标签。

如果你需要修改颜色,字体大小,间距....这种方式显然太繁琐,这时候ngclass就来了。

Angular 4 设置组件样式的几种方式
 ngclass

注意ngClass后面的字样。label为什么没有用单引号呢,而后面的text-primary却有呢?

1.label是一个变量,我们的样式是可以传参的。

Angular 4 设置组件样式的几种方式

也就是你的html标签不需要改动,需要什么样式就在ts离传入即可。ngClass也可以利用这个特性去修改。

其实这几种用的地方也挺多的,不过得根据实际需求去采用不同形式。

欢迎来找我交流Angular 或前端技术哟。

查看更多关于【angular】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
Angular.js的作用域和数据绑定
初识Angular.js通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。作用域作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器

0评论2023-03-16944

angularJSapi学习-angular.copy使用
angular.copy使用效果:初始状态:输入信息后未保存状态:点击save后状态:当输入框内容和master内容不一致时:点击reset使得user的信息被重置为master中信息: 具体代码: 1 !DOCTYPE HTML 2 html ng-app="app" 3 headscript src="./angular.min.js"/script

0评论2023-03-16345

Angular.js之内置过滤器学习笔记 javascript过滤器
!DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleangularFilter/titlescript src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"/script/head  body ng-app="angularJS" ng-controller="ctrl"    div{{

0评论2023-03-08452

Angular 隨記
Windows下更新Node 和NPM方法管理員模式打開powershell執行以下命令:Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Forcenpm install -g npm-windows-upgradenpm-windows-upgrade

0评论2023-03-08858

双向数据绑定(angular,vue) 双向数据绑定指令
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue.angular众所周知是使用的脏检查($dirty)。一开始大家会认为angular开启了类似setInterval去不停的循环检查,性能极差,但其实并不是,$dirty是在一定条件下才会去执行,比如输入框

0评论2023-03-08953

angular.js使用ui-router注入报错,这里是版本问题导致的
 报错如下:common.ts:604Uncaught SyntaxError: Unexpected token ) stateEvents.ts:211Uncaught SyntaxError: Unexpected token ) jquery.js:3827 Uncaught Error: [$injector:modulerr] Failed to instantiate module salesApp due to: Error: [$injector

0评论2023-03-08406

angular5给懒加载模块添加loading angular2懒加载
在根组件的构造函数中直接执行:this.router.events.subscribe(event={if(event instanceof RouteConfigLoadEnd) {this.toast.hide();}if(event instanceof RouteConfigLoadStart) {this.toast.loading();} }); 

0评论2023-03-08610

mean(bootstrap,angular,express,node,mongodb)通用后台框架
学习node,我这个毫无美感的程序员在bootstrap与node的感染下,向着“全栈工程师”迈进,呵呵!最终选择如题的技术方案,这些东东都算比较新的,网上的资料比较少,参考了不少github程序及自己的努力,终于有一些感觉了,于是开贴记录一些感悟,供自己与同道

0评论2023-03-08393

Angular 核心概念
module(模块)作用通过模块对页面进行业务上的划分,根据不同的功能划分不同的模块。将重复使用的指令或者过滤器之类的代码做成模块,方便复用注意必须指定第二个参数,否则变成找到已经定义的模块请参照资料-备课代码-20-module.html理解语法语法: angular.

0评论2023-03-08579

Angular 核心概念2
自定义指令指令增强了 HTML,提供额外的功能内置的指令基本上已经可以满足我们的绝大多数需要了少数情况下我们有一些特殊的需要,可以通过自定义指令的方式实现普通指令语法div hello-world/divhello-world/hello-world angular.module('myModule', []).contr

0评论2023-03-08934

Angular框架 angular框架和vue框架的区别
Angular 框架库和框架的区别jQuery:库库一般都是封装了一些常用的方法自己手动去调用这些方法,来完成我们的功能$('#txt').val('我是小明');$('div').text('xx');angular:框架框架都是提供一种规范或者模式,我们却要按照它提供的这种规则去写代码框架会自动

0评论2023-03-08930

更多推荐