如何显示 Angular innerHTML + 内容

Question

我需要显示内部 html 加上 div 之间的内容。我需要 innerHTML 中的一条消息，即 notification.message 和内容作为 tag.button 之间的按钮对于所有动态应该相同 message.which 是重复关闭按钮的关闭 button.instead 我需要动态更改消息并保持关闭按钮不变。请帮助我这样做...

我要转换

<div [innterHTML]="message"><button></div> to

<div>message <button>X</button></div>

当我尝试转换下面的代码时，我没有关闭按钮，只有内容正在呈现。

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
      [innerHTML]="notification.message"
    >
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>

Answer 1

如果我是对的，你想 render/show 你的消息和按钮都在 div 里面。然后如果 notification.message 中没有任何 HTML 代码，则可以在此处使用插值而不是 innerHtml。如果我理解你的查询有误，请更正。

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
    >
    {{notification.message}}
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>

Answer 2

我不认为这是可能的，至少我不知道。为什么不直接使用 span？

<ng-container *ngFor="let notification of src.notifications">
    <div class="elementToFadeInAndOut">
      <div
      class="notification is-toast"
      style="margin-top: 10px; float:right;"
      data-e2e="notifier-toast"
    >
    <span [innerHTML]="notification.message"></span>
    <button class="close" (click)="src.destroy(notification)" data-e2e="notifier-close">
        <span class="icon">
          <i class="fal fa-times fa-lg"></i>
        </span>
      </button>
    </div>
    </div>
   
  </ng-container>

如何显示 Angular innerHTML + 内容

how to display Angular innerHTML + content

angular

angular8

dangerouslysetinnerhtml