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

zsbz8rwp  于 2022-12-31  发布在  Angular
关注(0)|答案(2)|浏览(141)

我正在使用Angular CLI v13.3.6和Node v16.12.0,当我使用innerHTML属性时出现问题。
我正在使用Angular CLI v13.3.6和Node v16.12.0。在 typescript 文件中,我有一个带有如下有序列表的变量:
第一个月
我需要在一个禁用的div中显示这个文本,所以这是我在html文件中使用的代码:
<div id="myId" class="myClass" [innerHTML]="myText" disabled></div>
结果是显示了文本,但没有显示数字。当我使用无序列表时,也出现了同样的问题。我该怎么办?

moiiocjp

moiiocjp1#

出于安全原因,Angular编译器不接受任何字符串作为HTML注入。您可以通过使用DOMSanitizer“信任”字符串并将其解析为有效的HTML来绕过这一点。
您必须导入DomSanitizer并将其注入到yopur构造函数中,如下所示:

import { DomSanitizer } from '@angular/platform-browser';

constructor(private readonly domSanitizer: DomSanitizer) { }

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

this.domSanitizer.bypassSecurityTrustHtml(YOUR_STRING_HTML);
xpszyzbs

xpszyzbs2#

这与清理html无关。这是CSS问题。
因此,为了避免覆盖CSS。您可以尝试:

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

相关问题