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 ...
随机推荐
- jdk9+版本的bug
今天从jvm大神"你假笨"的公众号上,看到一个jdk 9+版本的编译bug,记录一下: public class JavacEvalBug{ private static Stri ...
- Android:使用shape制作素材
最近看到朋友制作的Android APP使用了极少的图片,但是图形却极其丰富,问了之后得知是使用shape绘制的,有很多优点. 下面是我整理的一些素材: 预览 下面是图片预览: 代码 布局文件 < ...
- java- WatchService监控
java7中新增WatchService可以监控文件的变动信息(监控到文件是修改,新增.删除等事件:) 其中注册事件是需要的: StandardWatchEventKinds.ENTRY_MODIFY ...
- 这些年我在技术路上做过最虚伪愚蠢的事情,就是在CSDN上刷屏赚分
现在似乎Github成了所谓技术人士的新宠,之前是博客,更早则是论坛. CSDN是众多技术论坛里比较突出的一个,人多高手也多,很多问题都能得到满意的回答. 谁都希望自己卓尔不群,我也不例外,我也想像那 ...
- MYSQL浮点型转int类型
cast('3.15926' as signed) cast(浮点型 as signed)
- iOS蓝色和黄色文件夹新建方式区别(区别之前)
关于这个问题,好像xcode9之前还是多少来着,创建方式是这样: 1.New Group创建的黄色文件夹是“假”文件夹,也就是说 show in finder 是看不到的 解释:这个文件夹并不是真正的 ...
- 公司Docker环境配置
1.安装最新的docker:$ curl -fsSL get.docker.com -o get-docker.sh$ sudo sh get-docker.sh 2.安装docker-compose ...
- Zuul路由转发规则
定制的路由规则的主要功能: 1.路由表中包含源路径,微服务名称,目标路径 2.Endpoint粒度配置支持 3.路由支持1对1精确路由 4.源路径可以前缀/**格式来模糊路由 5.目标路径可以使用前缀 ...
- Easyui-DataGrid 分页多选框 及 遍历所有选中项
html <table id='grid' class='easyui-datagrid' style='height:500px' url='Ajax-index.php?module=< ...
- R语言编程艺术#03#列表(list)
向量的元素要求都是同类型的,而列表(list)与向量不同,可以组合多个不同类型的对象.类似于C语言中的结构体(struct)类型. 1.创建列表 从技术上讲,列表就是向理.之前我们接触过的普通向量都称 ...