方法一:在css中设置样式

for CSS added to the component

:host ::ng-deep mySelector {
background-color: blue;
}

for CSS added to index.html

body ::ng-deep mySelector {
background-color: green;
}

方法二:在ng生命周期中设置样式

使用方法二,我们得了解ng4的生命周期;经过测试,在ngAfterViewChecked方法中可以设置样式

名称

时机

接口

范围

ngOnChanges

当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。

OnChanges

指令和组件

ngOnInit

在第一轮 ngOnChanges 完成之后调用。 ( 译注:也就是说当每个输入属性的值都被触发了一次ngOnChanges 之后才会调用ngOnInit ,此时所有输入属性都已经有了正确的初始绑定值 )

OnInit

指令和组件

ngDoCheck

在每个 Angular 变更检测周期中调用。

DoCheck

指令和组件

ngAfterContentInit

当把内容投影进组件之后调用。

AfterContentInit

组件

ngAfterContentChecked

每次完成被投影组件内容的变更检测之后调用。

AfterContentChecked

组件

ngAfterViewInit

初始化完组件视图及其子视图之后调用。

after initializing the component's views and child views.

AfterViewInit

组件

ngAfterViewChecked

每次做完组件视图和子视图的变更检测之后调用。

AfterViewChecked

组件

ngOnDestroy

当 Angular 每次销毁指令 / 组件之前调用。

OnDestroy

指令和组件

ng4.0 使用[innerHTML]动态插入的富文本如何设置样式的更多相关文章

  1. vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...

  2. Style样式的四种使用(包括用C#代码动态加载资源文件并设置样式)

    Posted on 2012-03-23 11:21 祥叔 阅读(2886) 评论(6) 编辑 收藏 在Web开发中,我们通过CSS来控制页面元素的样式,一般常用三种方式: 1.       内联样式 ...

  3. vue 使用v-html指令渲染的富文本无法修改样式的解决方法

    最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式 解决方法: 把需要添加或重置的样式单独放在一个style标签里, 定义为全局样式,代码如下: <style> ...

  4. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  5. java 解析富文本处理 img 标签

    很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 1)怎样将富文本的图片的 src 获取出来? 2)后台上传的时候用的是相对路 ...

  6. Django-- KindEditor 富文本编辑器使用

    KindEditor是一款还不错的开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.之所以推荐这一 ...

  7. iOS使用NSMutableAttributedString实现富文本小结

    NSAttributedString NSAttributedString对象管理适用于字符串中单个字符或字符范围的字符串和关联的属性集(例如字体和字距).NSAttributedString对象的默 ...

  8. UILabel的富文本显示选项

    UILabel的富文本格式设置 1.实例化方法和使用方法 实例化方法: 使用字符串初始化 - (id)initWithString:(NSString *)str; 例: NSMutableAttri ...

  9. vue问题四:富文本编辑器上传图片

    vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...

随机推荐

  1. RxJava2学习笔记(2)

    上一篇已经熟悉了Observable的基本用法,但是如果仅仅只是“生产-消费”的模型,这就体现不出优势了,java有100种办法可以玩这个:) 一.更简单的多线程 正常情况下,生产者与消费者都在同一个 ...

  2. HDU4772(杭州赛区)

    Zhuge Liang's Password Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  3. Scala:Method 小技巧,忽略result type之后的等号

    var x = 0 def IncreaseOne(): Int = { x += 1 x } def IncreaseOne() = { x += 1 x } def IncreaseOne = { ...

  4. Android批量图片加载经典系列——使用xutil框架缓存、异步加载网络图片

    一.问题描述 为提高图片加载的效率,需要对图片的采用缓存和异步加载策略,编码相对比较复杂,实际上有一些优秀的框架提供了解决方案,比如近期在git上比较活跃的xutil框架 Xutil框架提供了四大模块 ...

  5. 解剖SQLSERVER 第一篇 数据库恢复软件商的黑幕(有删减版)

    解剖SQLSERVER 第一篇  数据库恢复软件商的黑幕(有删减版) 这一系列,我们一起来解剖SQLSERVER 在系列的第一篇文章里本人可能会得罪某些人,但是作为一位SQLSERVER MVP,在我 ...

  6. 手把手教你用CAB发布OCX的简单办法

    CAB是一种文件压缩格式,把OCX文件(ActiveX插件)压缩成CAB文件是为了发布它,这种发布方式给人感觉“浏览器会自动安装该插件”,很多朋友钟情于此.目前流行很多压缩工具,但WINRAR这类工具 ...

  7. 同一个脚本在SQLPLUS和SQLDEV上的不同

    前几天收集了信息给Oracle.oracle那边表示格式不正确.让我又一次收集.我非常费解,我是依照官方文档做的呀,怎么会? 于是我果断自己搭了一个环境:RHEL5.8+10.2.0.5 客户那边没法 ...

  8. 译: 5. RabbitMQ Spring AMQP 之 Topic 主题

    在上一个教程中,我们提高了消息传递的灵活 我们使用direct交换而不是使用仅能够进行虚拟广播的fanout交换, 并且获得了基于路由key 有选择地接收消息的可能性. 虽然使用direct 交换改进 ...

  9. 物联网架构成长之路(24)-Docker练习之Compose容器编排

    0.前言 一开始学的之后,是想一步到位直接上Kubernetes(K8s)的,后面没想到,好像有点复杂,有些概念不是很懂.因此学习东西还是要循序渐进,慢慢来.先了解单机编排技术Docker Compo ...

  10. pattern-matching as an expression without a prior match -scala

    https://www.scala-lang.org/files/archive/spec/2.11/08-pattern-matching.html https://docs.scala-lang. ...