帶有樣式屬性的字符串形式的 Angular html 模板呈現為沒有樣式屬性

Question

我有一個 Util.ts，它定義了如下所示的格式函數。 問題出在具有樣式屬性的小標簽上。

export const formatMessage = (message ) =>{
    return '<b>' + message.name+" </b><small style ='color:black;'>" +message.ts + '</small>  ' + message.c;
  }

但是，當渲染小標簽的樣式屬性被刪除時。

我不確定為什么會出現這種行為，formatMessage 函數返回的 HTML 字符串模板使用 DIV 的 innerHTML 附加到 HTML，如下所示。

<ul style="list-style-type: none;">
  <li  *ngFor="let each of messages"><div class='messageStyle' [innerHTML]="each"> </div></li>
</ul>

為什么這個樣式屬性被刪除（而類屬性保留），我該如何解決這個問題？

Answer 1

dom sanitizer 從您的 html 中提取樣式。 這樣做是為了防止 xss 攻擊。 您可以通過以下方式繞過安全檢查：

  constructor(private s: DomSanitizer) { }
...
  export const formatMessage = (message, sanitizer ) =>{
    return sanitizer.bypassSecurityTrustHtml('<b>' + message.name+" </b><small style ='color:black;'>" +message.ts + '</small>  ' + message.c);
  }

並將消毒劑傳遞給 formatMessage