在angular中使用innerHtml給標(biāo)簽賦值時(shí)娜庇，報(bào)錯(cuò)：Angular: How to Deal With the 'Sanitizing HTML Stripped Some Content'损姜；查資料發(fā)現(xiàn)，原來是angular出于安全原因键菱，會(huì)將innerhtml內(nèi)的標(biāo)簽過濾掉，所以渲染失敗。最后使用angular的管道解決問題，至于管道的詳細(xì)介紹者吁，大家可以自行查閱資料。
下面記錄一下業(yè)務(wù)需求及實(shí)現(xiàn)步驟
- 需求：要做一個(gè)消息搜索功能饲帅，將搜索詞在當(dāng)前消息中高亮顯示复凳。
- 思路：
1瘤泪、將搜索詞替換為帶標(biāo)簽html元素；
2育八、使用innerhtml方法將替換后的內(nèi)容賦值給標(biāo)簽对途。
最終效果圖：
消息搜索.png
- 實(shí)現(xiàn)步驟
1、在utils目錄下新建一個(gè)nosanitizerpipe.ts文件髓棋；文件內(nèi)容如下：
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({ name: 'noSanitize' }) //noSanitize是在html中使用管道時(shí)的名稱
export class NoSanitizePipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) { }
transform(html: string): SafeHtml {
return this.domSanitizer.bypassSecurityTrustHtml(html);
}
}
目錄結(jié)構(gòu).png
2实檀、在app.module.ts文件中引用；
import { NoSanitizePipe } from '../app/utils/nosanitizerpipe';
//在declarations中聲明
@NgModule({
declarations: [
...,
NoSanitizePipe
]
})
3仲锄、在ts文件中處理消息（此步驟為我的項(xiàng)目需求劲妙，可不參考）湃鹊；
//this.msgValue為搜索的值儒喊，item.content.content為當(dāng)前這條消息內(nèi)容
//消息為（例）：去看房間有正規(guī)的報(bào)價(jià)單嗎？
//處理為：去看房間有正規(guī)的報(bào)價(jià)單<span style="color:red;">嗎</span>币呵？
item.content.content = (item.content.content).split(this.msgValue).join(`<span style="color:red;">${this.msgValue}</span>`);
4怀愧、在HTML中使用。
<p [innerHTML]="item.content.content | noSanitize"></p>
至此余赢，問題解決芯义，特此記錄！
