Angular 5中如何在MatDialog中正确展示动态HTML代码？

我来给你梳理两种可行的实现方式，从最简便的到适配复杂场景的，你可以根据自己的需求来选择：

一、最简便的方案：使用[innerHTML]绑定（纯静态HTML场景） #

这是处理纯静态HTML展示最快的方式，核心是利用Angular的[innerHTML]属性绑定，再配合DomSanitizer绕过安全校验（因为Angular默认会过滤掉它认为不安全的HTML内容）。

具体步骤： #

1. 创建MatDialog专用组件
   先新建一个用于展示HTML的弹窗组件，比如HtmlPreviewDialogComponent：

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-html-preview-dialog',
  // 模板里直接用[innerHTML]绑定处理后的安全HTML
  template: `<div class="preview-container" [innerHTML]="safeHtml"></div>`,
  styles: [`.preview-container { padding: 16px; max-height: 80vh; overflow-y: auto; }`]
})
export class HtmlPreviewDialogComponent {
  safeHtml: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer,
    // 接收弹窗传入的数据
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialogRef: MatDialogRef<HtmlPreviewDialogComponent>
  ) {
    // 将传入的原始HTML转为Angular认可的安全格式
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(data.obj.html);
  }
}

2. 调用MatDialog打开弹窗
   在你的业务组件里，通过MatDialog服务打开这个弹窗并传递数据：

import { MatDialog } from '@angular/material';
import { HtmlPreviewDialogComponent } from './html-preview-dialog.component';

// 假设这是你的业务组件
export class YourBusinessComponent {
  constructor(private dialog: MatDialog) {}

  openHtmlPreview() {
    this.dialog.open(HtmlPreviewDialogComponent, {
      width: '90vw',
      maxWidth: '1200px',
      // 把包含HTML的数据传递给弹窗
      data: { obj: { html: '<h1>这是动态HTML内容</h1><p>支持各种标签样式</p>' } }
    });
  }
}

重要安全提示： #

• bypassSecurityTrustHtml会跳过Angular的安全检查，如果你的HTML内容来自不可信来源（比如用户输入），一定要先做XSS过滤和内容验证，避免注入攻击。

二、动态创建模板（支持Angular语法场景） #

如果你的HTML内容里包含Angular特有的语法（比如*ngIf、插值表达式{{}}、自定义组件/指令），[innerHTML]就无法解析这些语法了，这时候需要动态创建并编译Angular模板。

具体实现： #

1. 创建支持动态模板的弹窗组件

import { Component, Inject, ViewContainerRef, Compiler, NgModule, ModuleWithComponentFactories } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-dynamic-template-dialog',
  template: `<div #templateContainer></div>`
})
export class DynamicTemplateDialogComponent {
  constructor(
    private vcRef: ViewContainerRef,
    private compiler: Compiler,
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialogRef: MatDialogRef<DynamicTemplateDialogComponent>
  ) {
    this.renderDynamicTemplate();
  }

  private renderDynamicTemplate() {
    // 1. 创建动态组件，把传入的HTML作为组件模板
    const DynamicTemplateComponent = Component({
      template: this.data.obj.html
    })(class {});

    // 2. 创建动态模块，需要导入CommonModule来支持ngIf、ngFor等内置指令
    const DynamicTemplateModule = NgModule({
      imports: [CommonModule],
      declarations: [DynamicTemplateComponent]
    })(class {});

    // 3. 编译模块并渲染组件
    this.compiler.compileModuleAndAllComponentsAsync(DynamicTemplateModule)
      .then((moduleFactories: ModuleWithComponentFactories<any>) => {
        const componentFactory = moduleFactories.componentFactories.find(f => 
          f.componentType === DynamicTemplateComponent
        );
        // 在容器中创建动态组件
        const componentRef = this.vcRef.createComponent(componentFactory);
        // 如果需要给动态组件传递数据，可以在这里设置
        // componentRef.instance.yourProperty = someValue;
      });
  }
}

2. 调用方式和之前类似
   只要把弹窗组件换成DynamicTemplateDialogComponent即可，传入的HTML里就可以写Angular语法了，比如：

openDynamicTemplateDialog() {
  this.dialog.open(DynamicTemplateDialogComponent, {
    data: { 
      obj: { 
        html: `
          <h1>{{ title }}</h1>
          <p *ngIf="showContent">这是带Angular语法的动态内容</p>
        ` 
      } 
    }
  });
}

适用场景说明： #

这种方式相对复杂，性能消耗也比innerHTML高，所以只有当你需要解析Angular模板语法时才用，纯静态HTML优先选第一种方案。

内容的提问来源于stack exchange，提问作者Piter Parker