在Angular中使用innerHTML注入有序列表

Question

我正在使用Angular CLI v13.3.6与Node v16.12.0，我有一个问题，当我使用innerHTML属性。

我使用的是Angular CLI v13.3.6和Node v16.12.0。在typescript文件中，我有一个像这样的有序列表变量:

let myText = "<ol><li>first</li><li>second</li></ol>";

我需要在一个禁用的div中显示这个文本，所以这是我在html文件中使用的代码:

<div id="myId" class="myClass" [innerHTML]="myText" disabled></div>

结果是显示文本但不显示数字。当我使用无序列表时，也会出现同样的问题。我该怎么办?

Answer 1

出于安全考虑，Angular编译器不接受任何以HTML形式注入的字符串。您可以通过使用DOMSanitizer来"信任"来绕过这个问题。解析为有效的HTML。

您必须导入DomSanitizer并将其注入到您的构造函数中，如:

import { DomSanitizer } from '@angular/platform-browser';
constructor(private readonly domSanitizer: DomSanitizer) { }

然后使用DomSanitizer来信任您的字符串，将其解析为HTML。你可以这样使用:

this.domSanitizer.bypassSecurityTrustHtml(YOUR_STRING_HTML);

Answer 2

这与清除html无关。这是CSS的问题

所以要避免覆盖CSS。你可以试试:

• 创建一个全新的angular应用:ng new。这样就不会涉及第三方CSS了
• 打开Incognito/Anonymous模式的应用程序，这将有助于防止任何浏览器扩展干扰您的应用程序