在 angular2 中为动态创建的 iframe 设置局部参考变量答案

【问题标题】：Set local reference variable for dynamically created iframe in angular2在 angular2 中为动态创建的 iframe 设置局部参考变量
【发布时间】：2017-08-28 19:24:14
【问题描述】：

如何在 angular2 中为动态创建的 iframe 设置局部参考变量？我需要将 #dynIframe 变量添加到 iframe。如何添加？

【问题讨论】：

你不能添加对动态创建元素的引用

标签： javascript angular iframe

【解决方案1】：

我会尝试从将 iframe 标记添加到组件的模板开始。然后使用绑定将 src 属性更改为指向实际 URL：

@Component({
  selector: 'my-app',
  template: `
   ...
<iframe #dynIframe type="text/html" [src]="iframeUrl"></iframe>`
})
export class MyComponent{
   iFrameUrl: string = 'about:blank';

   assignIframeUrl() {
     ...
     this.iFrameUrl = // assign actual URL here

   }
}

更新：您可以尝试这样的方法，但需要编译本地模板 var。如果没有本地模板变量，它应该可以工作。

constructor(private elementRef: ElementRef) {}

ngOnInit(){
    const component: HTMLElement = this.elementRef.nativeElement;

    let iFrame = document.createElement(' <iframe #dynIframe...> ');
    component.appendChild(iFrame);
}

【讨论】：

不能动态添加？
它显示一些错误：ERROR DOMException: Failed to execute 'createElement' on 'Document': 提供的标签名称 (' ') 无效名字。
然后使用我原来的解决方案。