ng4.0 使用[innerHTML]动态插入的富文本如何设置样式
方法一:在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]动态插入的富文本如何设置样式的更多相关文章
- vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案
在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...
- Style样式的四种使用(包括用C#代码动态加载资源文件并设置样式)
Posted on 2012-03-23 11:21 祥叔 阅读(2886) 评论(6) 编辑 收藏 在Web开发中,我们通过CSS来控制页面元素的样式,一般常用三种方式: 1. 内联样式 ...
- vue 使用v-html指令渲染的富文本无法修改样式的解决方法
最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式 解决方法: 把需要添加或重置的样式单独放在一个style标签里, 定义为全局样式,代码如下: <style> ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- java 解析富文本处理 img 标签
很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 1)怎样将富文本的图片的 src 获取出来? 2)后台上传的时候用的是相对路 ...
- Django-- KindEditor 富文本编辑器使用
KindEditor是一款还不错的开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.之所以推荐这一 ...
- iOS使用NSMutableAttributedString实现富文本小结
NSAttributedString NSAttributedString对象管理适用于字符串中单个字符或字符范围的字符串和关联的属性集(例如字体和字距).NSAttributedString对象的默 ...
- UILabel的富文本显示选项
UILabel的富文本格式设置 1.实例化方法和使用方法 实例化方法: 使用字符串初始化 - (id)initWithString:(NSString *)str; 例: NSMutableAttri ...
- vue问题四:富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...
随机推荐
- Facebook's React vs AngularJS: A Closer Look
When we launched React | A JavaScript library for building user interfaces two weeks ago there were ...
- oracle索引原理(b-tree,bitmap,聚集,非聚集索引)
B-TREE索引 一个B树索引只有一个根节点,它实际就是位于树的最顶端的分支节点. 可以用下图一来描述B树索引的结构.其中,B表示分支节点,而L表示叶子节点. 对于分支节点块(包括根节点块)来说,其所 ...
- Golang 实现 set 集合,变相实现 切片去重、排序 功能
Java 中的集合(set)去重很方便,PHP 中的数组值去重,就更加方便,一个函数搞定:array_unique(),Golang 中就比较苦逼了,官方没有提供对“切片去重”的功能,而项目中,又经常 ...
- android:ListView 的简单用法
首 先新 建 一个 ListViewTest 项 目, 并 让 ADT 自 动帮 我 们创 建 好 活动 . 然后 修 改 activity_main.xml 中的代码,如下所示: <Linea ...
- 从Encoder到Decoder实现Seq2Seq模型
https://zhuanlan.zhihu.com/p/27608348 更新:感谢@Gang He指出的代码错误.get_batches函数中第15行与第19行,代码已经重新修改,GitHub已更 ...
- JavaScript比较两个对象的值是否相等
JavaScript比较两个对象的值是否相等 function isObjectValueEqual(a, b) { var aProps = Object.getOwnPropertyNames(a ...
- docker 打开监听端口
安装docker的镜像ubuntu,链接:http://www.cnblogs.com/liqiu/p/4162719.html 一.登录ubuntu @~ $ docker run -i -t 9b ...
- llvm 编译
https://llvm.org/docs/GettingStarted.html https://clang.llvm.org/get_started.html https://llvm.org/d ...
- fiddler展示serverIP方法
转载自:http://www.xuanfengge.com/fiddler-displays-the-set-ip-method.html 前言 由于web前端在多个环境中开发,需要经常更换host, ...
- 基于CentOS体验万象优图鉴黄服务
系统要求:CentOS 7.2 64 位操作系统 初始化配置 使用万象优图图片鉴黄 API 接口,我们需要先完成以下步骤: 获取腾讯云账号 APP ID 配置云 API 公钥/密钥 配置优图 buck ...