在 iframe 上设置 onerror 的角度方式答案

【问题标题】：Angular way to set onerror on iframe在 iframe 上设置 onerror 的角度方式
【发布时间】：2017-04-13 06:47:14
【问题描述】：

是否有角度方法可以在 iframe 上设置 onerror 属性，以便我可以使用角度表达式。我试过用这个：

<iframe onerror="{{vm.error()}}" ng-src="{{vm.url}}"/>

但出现错误：

不允许对 HTML DOM 事件属性进行插值

【问题讨论】：

标签： javascript angularjs iframe

【解决方案1】：

使用默认事件你不能。但是您可以创建一个指令并分配给iframe。然后在指令的逻辑中，注册onerror事件并编写你的逻辑

import { Directive, ElementRef, HostListener, Renderer2, AfterViewInit } 
from '@angular/core';

@Directive({
  selector: '[appFrame]'
})
export class FrameDirective implements AfterViewInit {

 constructor(private iframeEl: ElementRef, private renderer: Renderer2) {
 }

  ngAfterViewInit() {
    this.renderer.listen(this.iframeEl.nativeElement, 'error', () => {
        console.log('error caught in directive');
    });
  }

}

【讨论】：

不确定如何将其标记为“答案”。你能详细说明一下吗？示例代码会有所帮助。
this.renderer.listen(this.iframeEl.nativeElement, 'error', () => { console.log('error caught in directive'); }); 这里没有回调为error。它与我们在 JS 中使用 onload() 函数的实现相同 - 但使用 Angular 中的指令完成 - this.iframeEl.nativeElement 中不存在 HTTP 响应标头来检查状态。