html 标签属性在通过 angular 中的字符串呈现 html 时不起作用 6

Question

我将 HTML 存储在一个字符串中并在 HTML 文件中使用它，我使用了 HTML 清理管道。

下面是我的字符串

  privacyNotice = "<div style=\"color: #ff0000;font-style: italic;\">Before continuing to the  Application, you are required to read and acknowledge this Privacy Notice</div>......<div><input type=\"checkbox\" (change)=\"changeAcknowledgeBtnState()\"/><span class=\"pl-5\">I acknowledge terms of the privacy notice</span> </div> <div>   <button class=\"ackBtn\" [disabled]=\"disableButton\" (click)=\"changePrivacyNoticeStatus()\">Acknowledge </button> </div>";

下面是html文件代码

<div class="container" [innerHTML]='privacyNotice | safeHtml'>

我参考例子使用了safeHtml管道

按钮的 disabled 属性不起作用，而且 changePrivacyNoticeStatus() 也没有被调用

Answer 1

safeHtml管道只解析HTML，无法解析[disabled]="angularCode()"或(click)="changePrivacyNoticeStatus()"等Angular代码。 [] 和 () 语法是 Angular 的数据绑定语法的一部分，当您构建 Angular 项目时，它被编译到 Javascript 中。您的字符串是在运行时提供的，预计是纯净的并且可以使用 HTML：它不能再在运行时从 Angular 代码解析为 Javascript。

您使用字符串形式的动态内容这一事实在 Angular 中被视为代码异味，看看您是否可以通过为其编写组件并提供 Inputs 到组件，而不是生成 HTML 代码字符串。

另一个选项可以是内容投影：

<app-privacy-notice>
  <button class="ackBtn" [disabled]="disableButton" (click)="changePrivacyNoticeStatus()">
    Acknowledge
  </button>
  <input type="checkbox" (change)="changeAcknowledgeBtnState()"/>
</app-privacy-notice>

隐私-notice.component.html:

<div style="color: #ff0000;font-style: italic;">
  Before continuing to the  Application, you are required to read and 
  acknowledge this Privacy Notice
</div>
<div>
  <ng-content select="input"></ng-content>
  <span class="pl-5">I acknowledge terms of the privacy notice</span>
</div>
<div>
  <ng-content select="button"></ng-content>
</div>

html 标签属性在通过 angular 中的字符串呈现 html 时不起作用 6

html tag attributes not working when rendering html through string in angular 6

html

angular

typescript

angular6

dynamic-html