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