如何在 Angular 中使用 [innerhtml] 渲染 <>？

Question

我一直在嘗試使用[innerHtml]呈現一個簡單的字符串，但我一直失敗。 基本上我的問題是當我使用 <> 時。 例如，如果我的字符串是：

someText = "abc <1231> color"; 

我可以渲染

abc <1231> 顏色

但是如果我的字符串是：“abc <comment1 color”我只能渲染

abc 顏色

如何使用[innerHtml]呈現我的字符串？

現場演示

Answer 1

如果您只想插入通用文本，而不是實際的 HTML，則應使用以下語法：

<div>{{someText}}</div>

如果出於任何原因使用 [innerHTML] 對您很重要，您可以使用someText = 'abc <1231> color'.replace(/</g, '&lt;')去除所有 HTML 標簽，從而解決您的問題問題。 然后，您不能在元素中使用任何 HTML。

要允許特定的 HTML 元素，您可以使用以下內容：

const someText = '<b>Bold Text <123></b>'.replace(/<((b|i|u|strong|a)\s|>)/g, '&lt;$1';

無論如何，將用戶生成的 HTML 內容插入到您的組件中是非常不安全的。 您可以查看此文檔以了解原因。

Answer 2

我想在這里添加一點謹慎，因為之前提交的兩個答案存在一些問題。

首先，如果您只是想顯示通用文本數據，我會完全避免使用innerText或innerHTML 。 出於這個原因，Angular 內置了數據綁定，我建議使用它。 正如@nrausch 示例的第一部分所述。

其次，如果由於某種原因您的最終目標是通過innerHTML屬性向用戶顯示 HTML，則正確的方法是使用 Angular 的內置DOMSanitizer清理 HTML

以下是如何使用 DomSanitizer 的示例：

首先創建一個消毒管道：

import { DomSanitizer } from '@angular/platform-browser'
import { PipeTransform, Pipe } from "@angular/core";

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform  {
  constructor(private sanitized: DomSanitizer) {}
  transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

其次在組件 HTML 中使用管道：

<div><strong>Binding Example:</strong> {{ name }}</div>

<div [innerHtml]="myHTML | safeHtml"></div>

這是一個StackBlitz 示例，向您展示了這兩種方法。

Answer 3

有2個解決方案

1. 使用innerText而不是innerHTML 。

2. 而不是使用<>上someText, you can use <> to show < & >`字母。

someText = "abc <1234> color";