Angular DomSanitizer 不绑定角度组件答案

【问题标题】：Angular DomSanitizer not binding angular componentAngular DomSanitizer 不绑定角度组件
【发布时间】：2025-11-28 09:50:01
【问题描述】：

我正在尝试将 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 组件也没有被调用。

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

【问题讨论】：

标签： html angular dom

【解决方案1】：

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

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

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

【讨论】：