Angular 5中渲染JSON压缩HTML文本并绑定模型值的实现

我来帮你搞定这个需求！首先得指出你当前代码里的核心问题：Angular的[innerHtml]只会渲染静态HTML内容，不会解析其中的Angular模板语法（比如属性绑定[src]="IFrameUrl"），所以你原来的写法里，iframe的src绑定根本不会生效。

下面是修正后的完整实现方案：

1. 组件代码修改 #

我们需要把模型值直接替换到压缩HTML字符串中，而不是依赖Angular的模板绑定语法，代码如下：

import { Component, OnInit, DomSanitizer } from '@angular/core';

@Component({
  selector: 'app-setup-popup',
  templateUrl: './set-up-app-popup.component.html'
})
export class SetUpAppPopupComponent implements OnInit {
  IFrameUrl: any;

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    // 先将URL标记为安全的资源URL
    this.IFrameUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://angular.io/");
  }

  getAppHtml() {
    // 从安全URL对象中提取实际的URL字符串
    const iframeSrc = this.IFrameUrl.changingThisBreaksApplicationSecurity;
    // 直接把URL插入到压缩HTML字符串中，替换原来的Angular绑定语法
    const minifiedHtml = `<div> <iframe class="col-md-12" style="display:block;height:100%" src="${iframeSrc}" frameborder="0" allowFullScreen="true"></iframe> </div>`;
    // 将最终的HTML标记为安全的HTML内容
    return this.sanitizer.bypassSecurityTrustHtml(minifiedHtml);
  }
}

2. 模板代码修正 #

确保模板正确调用getAppHtml()方法：

<div [innerHtml]="getAppHtml()"></div>

关键解释 #

• 为什么不用原来的[src]="IFrameUrl"？因为[innerHtml]只是把内容作为静态DOM插入，Angular不会对这部分内容进行模板编译，所以所有Angular特有的语法（绑定、指令、管道等）都不会生效。
• changingThisBreaksApplicationSecurity是AngularSafeResourceUrl对象的内部属性，用来获取我们标记为安全的原始URL字符串。虽然名字看起来很吓人，但这里我们已经通过bypassSecurityTrustResourceUrl验证了URL的安全性，所以可以放心使用。
• 如果你的压缩HTML有多个模型值需要绑定，只需要按照同样的方式，把每个值都替换到HTML字符串对应的位置即可。

内容的提问来源于stack exchange，提问作者Sachin jeev