Question

在Angular 2中遇到一些问题，我正在创建一个具有iframe的组件，并从输入中设置源。但是当它加载时，它会两次点击onLoad，一个点击src=''，另一个点击实际输入网址。

我似乎无法弄清楚当iframe放入视图时如何将网址挂起来。

export class ExternalComponent implements OnInit {
    @Input()
    url: string;

    private src: any;

    constructor(private sanitizer: DomSanitizer) {

    }

    ngOnInit()    
    {
        this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
    }

    onLoad() {

    }
}

HTML：

<iframe [src]="src" frameBorder="0" (load)="onLoad()"></iframe>

复制：http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview

由于

Answer 1

<击>

您可以尝试使用属性绑定，如果值为null

，则根本不添加

<iframe [attr.src]="src ? src = null" frameBorder="0" (load)="onLoad()"></iframe>

<击>

<强>更新

正如https://stackoverflow.com/a/15880489/217408中所述在将<iframe>添加到DOM之前将事件处理程序添加到元素时。这似乎是Angular正在做的事情。

在将元素添加到DOM

后，命令性地添加事件处理程序

Plunker example

url为空时忽略事件

Plunker example

Answer 2

'onLoad execution'在此示例中仅运行一次（http://plnkr.co/edit/wRZTH8?p=preview）。你确定其他事情没有发生吗？

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

@Component({
  selector: 'my-app',
  template: `<iframe [attr.src]="url ? url : null" frameBorder="0" (load)="onLoad()" style="width:200px;height:200px"></iframe>`
})
export class AppComponent implements ngOnInit{
    public url: any;

    constructor(private sanitizer:DomSanitizer){

    }

    ngOnInit()    
    {
        this.url =     this.sanitizer.bypassSecurityTrustResourceUrl('http://www.nekkon.com');
    }

    onLoad() {
        console.log('onLoad executed');
    }
}

Answer 3

ngOnInit()    
    {
        this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
    } 
This is wrong code if use like this iframe will load more time .
ts file 
ngOnInit()    
    {
        this.src = this.url;
    } 
make html page like this (use pipe)
<iframe [src]="src| safe" ></iframe>

pipe file

      import { DomSanitizer} from '@angular/platform-browser';
    constructor(private sanitizer:DomSanitizer){
      return   this.sanitizer.bypassSecurityTrustResourceUrl(value);

Answer 4

使用调试器我发现 event.target.src 可以提供解决方案。第一次运行时，它是一个空字符串 ""。第二次该值是图像 url。所以，就我而言，它是这样工作的：

onLoad(event: any) {
  if (event.target.src) {
      //do some stuff here
  }
}

onLoad使用Iframe多次发生

4 个答案: