html атрибуты тега не работают при рендеринге html через строку в angular 6 - PullRequest
Новая
       21

html атрибуты тега не работают при рендеринге html через строку в angular 6

0 голосов
/ 07 апреля 2020

Я храню 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'>

Я использовал безопасную Html трубу, ссылаясь на этот пример

Output Image

неработающий атрибут для кнопки не работает, а также не вызывается changePrivacyNoticeStatus ()

1 Ответ

0 голосов
/ 07 апреля 2020

Безопасная Html труба только анализирует HTML, невозможно проанализировать Angular код, такой как [disabled]="angularCode()" или (click)="changePrivacyNoticeStatus()". Синтаксис [] и () является частью синтаксиса привязки данных Angular, который компилируется в Javascript при создании проекта Angular. Ваша строка предоставляется во время выполнения и, как ожидается, будет чистой и готова к go HTML: ее невозможно разрешить с кода Angular до Javascript во время выполнения.

Тот факт, что вы используете динамическое c содержимое в виде строки, считается запахом кода в Angular, посмотрите, не можете ли вы решить эту проблему, написав для него компонент и предоставление Input s компоненту, а не генерацию HTML строк кода.

Другим вариантом может быть проекция содержимого: 

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

privacy-note.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>
...