Angular DomSanitizer 不绑定角度组件

Posted 2023-03-05

【中文标题】Angular DomSanitizer 不绑定角度组件

【英文标题】：Angular DomSanitizer not binding angular component

【发布时间】：2018-04-05 17:17:41

【问题描述】：

我正在尝试将 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 不会向标签属性添加一些特殊行为。为什么这样？ 我怎样才能让它发挥作用？

【参考方案1】：

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

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

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