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 ...
随机推荐
- (58)Wangdao.com第九天_JavaScript 对象的基本操作
对象的基本操作 创建对象 var 对象名 = new Object(); // new 函数; 称为构造函数,专门用来创建对象的函数 var god = 给对象增加属性 删除对象 ...
- Python 库/模块/工具收集
1 算法 1.1 字符串处理 re 正则表达式的标准库. StringIO / cStringIO 以读写文件的方式来操作字符串(有点类似于内存文件). cStringIO 是 C 语言实现的,提供高 ...
- JProfiler远程监控
1. 服务端安装JProfiler(与客户端版本一致) 2. 客户端配置连接: A).session——integration wizards——New remote integration B) ...
- Spark2.2+ES6.4.2(三十二):ES API之index的create/update/delete/open/close(创建index时设置setting,并创建index后根据avro模板动态设置index的mapping)
要想通过ES API对es的操作,必须获取到TransportClient对象,让后根据TransportClient获取到IndicesAdminClient对象后,方可以根据IndicesAdmi ...
- Machine、Swarm、Compose、SocketPlane这些Docker生态圈软件各解决了哪些问题?
Machine:解决的是操作系统异构安装Docker困难的问题,没有Machine的时候,CentOS是一种,Ubuntu又是一种,AWS又是一种.有了Machine,所有的系统都是一样的安装方式. ...
- 深入理解JVM(一)——JVM内存模型
JVM内存模型 Java虚拟机(Java Virtual Machine=JVM)的内存空间分为五个部分,分别是: 1. 程序计数器 2. Java虚拟机栈 3. 本地方法栈 4. 堆 5. 方法区. ...
- 微软BI 之SSRS 系列 - 实现 Excel 中图表结合的报表设计
来自群里面讨论的一个问题,EXCEL 中有类似于这样的图形,上面是 Chart, Chart X轴上的值正好就是下方 Table 的列头,这个在 SSRS 中应该如何实现? SSRS 2008.2 ...
- spring mvc 链接 postgresql
上一篇文章已经分享了搭建springmvc:http://www.cnblogs.com/liqiu/p/4252788.html 这一篇来链接数据库postgresql 1.在pom.xml添加几个 ...
- android开发之代码混淆
在${user.home}/project.properties文件中设置proguard.config属性 # To enable ProGuard to shrink and obfuscate ...
- MySQL数据切分的相关概念和原理详解
对于数据切分,我们可能还不是很熟悉,但是它对于MySQL数据库来说也是相当重要的一门技术,本文我们就详细介绍一下MySQL数据库的数据切分的相关知识,接下来就让我们一起来了解一下这部分内容. 什么是数 ...