在 Angular 中设置 iframe src 属性答案

【问题标题】：Setting iframe src attribute in Angular在 Angular 中设置 iframe src 属性
【发布时间】：2022-01-09 10:03:29
【问题描述】：

当通过 iframe 单击预览按钮时，我试图显示输入到 textarea 中的 HTML 代码的预览。

我曾尝试使用 Renderer2 的 setAttribute 函数，但一直得到一个

ERROR TypeError: Cannot read properties of undefined (reading 'setAttribute')

下面是相关代码。

HTML

<div class="wrap">
<textarea #postform id="postform" [(ngModel)]="this.display[0].MDFile" class="textarea_MD" style="overflow: hidden; overflow-wrap: break-word; height: 550px; width:600px; " placeholder="Enter markdown here"></textarea>
<br>
<br>
<button class="btn" (click)="saveMD()">Save</button>
<p></p>
<button class="btn" (click)="previewHTML()">Preview HTML</button>
<button class="btn" (click)="toDashboard()">Dashboard</button>
</div>
<iframe srcdoc="" class="preview" title="Preview"></iframe>

Component.ts

  previewHTML(): void {
    let html: any = this.domSanitizer.bypassSecurityTrustHtml(this.display[0].MDFile);
    this.renderer.setAttribute(this.preview.nativeElement, 'src','data:text/html;charset=utf-8,' + encodeURI(html));
  }

this.display[0].MDFile 是双向绑定 NgModel 保存 HTML 内容/文本的位置。

TypeError 的原因可能是什么？有办法解决这个问题吗？

如果没有，任何关于实现 HTML 预览的建议将不胜感激。

提前致谢。

【问题讨论】：

标签： html angular typescript iframe

【解决方案1】：

原来甚至不需要使用 Renderer2。

将代码更改为：

HTML

<iframe [src]='html' class="preview" title="Preview"></iframe>

Component.ts

previewHTML(): void {
    let file ='data:text/html;charset=utf-8,' + encodeURI(this.display[0].MDFile);
    this.html = this.domSanitizer.bypassSecurityTrustResourceUrl(file);
  }

【讨论】：