在Angular中,怎樣讓[innerHTML]中樣式起做用

前言

Html中使用innerHTML直接使用並無顯示innerHtml中的樣式html

image.png

能夠看出在直接使用innerHtml時原來的style樣式並無顯示api

解決辦法

_import_ { Pipe, PipeTransform } from '@angular/core';  
_import_ {DomSanitizer} from "@angular/platform-browser";  
  
/**
 * See https://angular.cn/api/core/Pipe for more info on Angular Pipes.
 * /
 
@Pipe({  
  name: 'html'  
})  
export class HtmlPipe implements PipeTransform {  
  
  constructor(private sanitizer: DomSanitizer) {  
  }  
  
  transform(html) {  
    return this.sanitizer.bypassSecurityTrustHtml(html);  
  }  
}

最後在html文件,在其中使用innerHTML標記並添加管道this

<div [innerHTML]="subject.stem | html"></div>

image.png

參考文章

Make styles work when dealing with [innerHTML] in Angular/Ionicspa

樣式因爲我不知道的緣由而沒法使用😐關於Angular的某些內容會清除全部動態添加的HTML。
在這裏閱讀更多
相關文章
相關標籤/搜索