Question

我正在尝试将html内容动态添加到DIV中。静态地这很好用。

有效的代码：

<popover-content #pop1
                 title="Cool Popover"
                 placement="right"
                 [closeOnClickOutside]="true">
  Popped up!!!
</popover-content>

<div>   
    <span>Testing with <span [popover]="pop1" [popoverOnHover]="true">popover</span> as they are not working with DomSanitizer</span>
</div>

现在我需要在后端生成这个div内容，然后必须在div中动态添加它。

不起作用的代码：的 HTML：

<popover-content #pop1
                     title="Cool PopOver"
                     placement="right"
                     [closeOnClickOutside]="true">
      Popped up!!!
    </popover-content>

    <div [innerHtml]="message | safeHtml">  
    </div>

.ts文件：

this.message = '<span>Testing with <span [popover]="pop1" [popoverOnHover]="true">popover</span> as they are not working with DomSanitizer</span>'

管：

import {Pipe, PipeTransform} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitized: DomSanitizer) {
  }

  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }

}

此后也没有调用popover组件。

在检查时，我确实看到，为了向DIV动态添加innerHtml内容，angular不会向标记属性添加一些特殊行为。为什么这样？我怎样才能让它发挥作用？

Answer 1

使用[innerHTML]="..."，您可以向DOM添加HTML，但Angular不会关心它包含的HTML，除了清理。

Angular组件，指令，事件和属性绑定仅适用于静态添加到组件模板的HTML。

您可以做的是在运行时使用组件模板编译HTML，如How can I use/create dynamic template to compile dynamic Component with Angular 2.0?中所述

Angular DomSanitizer不绑定角度分量

1 个答案: