技術標籤：Angular + Ionicpipe置信html程式碼innerHTML

場景再現

• subscript 是管道，用於解析汙染物 上下標

{{ 'PM2.5' | subscript }} 平均濃度

• 
• 由上圖可見，通過模板 {{ }} 插入的 html程式碼，沒有被解析

問題解決

• 可以通過 innerHTML屬性 插入程式碼，且需要通過safeHtml管道置信 該段 html程式碼
• 因為 Angular 出於安全考慮，對插入的 html程式碼 做了處理
• safeHtml管道通過 bypassSecurityTrustHtml()方法 處理 html程式碼，將其變為可信任的
• safeHtml管道 定義程式碼如下：

/**
 * html安全管道
 */
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml'
})

export class SafeHtmlPipe implements PipeTransform {
  constructor( private sanitizer: DomSanitizer ) {}

  transform(html: string): any {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}
 

• safeHtml管道 使用方式：

<div [innerHTML]="html | safeHtml"></div>

• 通過上述內容可以解決問題：使用 innerHTML 時，插入的 style樣式 會自動清除

• 綜上所述，解決 ”模板語法 {{ }} 插入 html程式碼，沒有被解析“ 問題的程式碼如下：
• 兩層管道，subscript 管道，用於解析汙染物上下標，safeHtml管道，用於置信 html程式碼

<span [innerHTML]="'PM2.5' | subscript | safeHtml">平均濃度