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	指令和组件

原文地址：https://www.cnblogs.com/minigrasshopper/p/8260257.html

时间： 2024-08-30 09:42:18

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

vue2.0 通过v-html指令编辑的富文本无法修改样式的原因

在最近的项目中遇到的问题:v-html编辑的富文本,无法在样式表中修改样式: <template> <div class="descBox" v-html='desc'></div> </template> <script> export default{ data(){ return { desc: "<p>I believe I can fly</p>" } } } </s

IOS 富文本，设置行间距、字间距，计算高度（转载组合而成）

一计算高度 -(CGFloat)getSpaceLabelHeight:(NSString*)str withFont:(UIFont*)font withWidth:(CGFloat)width { NSMutableParagraphStyle *paraStyle = [[NSMutableParagraphStyle alloc] init]; paraStyle.lineBreakMode = NSLineBreakByCharWrapping; paraStyle.alignmen

ios中label富文本的设置

1.修改不同文字和颜色 // 创建一个富文本 NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:@"哈哈哈哈哈123456789"]; // 修改富文本中的不同文字的样式 [attri addAttribute:NSForegroundColorAttributeName value:[UIColor blueColor] range:NSMakeRange(0, 5

Android实现RichText(富文本)不同Text样式

同一个TextView里面显示不同风格的文字. 类似这种. 主要的基本工具类有android.text.Spanned; android.text.SpannableString; android.text.SpannableStringBuilder; 使用这些类来代替常规String.SpannableString和SpannableStringBuilder可以用来设置不同的Span,这些Span便是用于实现Rich Text,比如粗体,斜体,前景色,背景色,字体大小,字体风格等. 使用

转载的一个富文本，挺实用的

文章内容大纲 1.NSMutableAttributedString的基本使用 2.NSMutableAttributedString的简易封装 3.使用开源代码GOBMarkupPaser处理富文本 4.UITextKit简介 5.编程思想的相关思考前言富文本使用案例: 这里我自己也用了富文本实现了简单的却也是常用的例子: 对于最后面的￥50中划线这种设置,估计只有富文本最好用了. 在IOS或者Mac OS X通过UIKit提供的用来显示字符串控件有三个: UILable,UITextFi

iOS之富文本总结

【实践】简洁大方的summernote 富文本编辑器插件的用发——实例篇

实例化后的summernote 是这样子的很漂亮对吧,而我做成页面效果是这样的: 先说说实例化一个summernote 的方法把,其实也不难,jq 选择器选择一个要变成富文本编辑器的元素然后调用 summernote 方法传入一个对象作为参数便可,参数是一个对象,属性就是这个富文本的一些样式属性,如下: 上面的属性是一些比较常用的属性,更多属性可以查看官方文档.特别注意一点的是callbacks 属性,它的作用是summernote 编辑器里面的一些功能要实现的回调方法,这里我的需求只是上传图

java 解析富文本处理 img 标签

很多项目都需要到富文本来添加内容,就好比新闻啊,旅游景点之类的,都需要使用富文本去添加数据,然而怎么我这边就发现了两个问题 1)怎样将富文本的图片的 src 获取出来? 2)后台上传的时候用的是相对路径,前端显示需要的是最对路径我下面就记录一下解决这两个问题的方法 1):怎么将富文本的图片的 src 获取出来?很简单,就一个工具即可 public static List<String> getImgStr(String htmlStr) { List<String> list

ios富文本的简单使用 AttributedString

富文本,顾名思义就是丰富的文本格式,本文demo使用NSMutableAttributedString //获取富文本 NSMutableAttributedString*attributeString_atts=[[NSMutableAttributedString alloc]initWithString:string]; //背景色 UIColor *backgroundColor=[UIColor whiteColor]; //字体 UIFont *fon