Как подписаться на src Change Iframe в Angular 7

Question

Мы ищем способ подписаться на изменение src (url) из IFrame внутри Angular 7 Application. Есть ли способ перехватить src Change?

Answer 1

На самом деле это проще, чем вы думаете, и вам даже не нужны fromEvent и rxjs.Просто послушайте событие load, как это:

<iframe [src]="src" (load)="test()"></iframe>

Это рабочий Stackblitz

И если вам нужна ссылка на iframe, вы также можете легко получить еебез ViewChild:

<iframe #frame [src]="src" (load)="test(frame)"></iframe>

Answer 2

Вы можете использовать конструктор RxJS fromEvent, чтобы получить событие load из iFrame и подписаться на его изменения.Вы можете использовать оператор пропуска RxJS, чтобы проигнорировать начальное событие загрузки, если вам нужно.

Вот суть того, что вы можете сделать, но я также привел полный пример стекаблица внизу ответа.

@ViewChild('iframe') iframe: ElementRef;

ngAfterViewInit(): void {
    fromEvent(this.iframe.nativeElement, 'load')
      // Skip the initial load event and only capture subsequent events.
      .pipe(skip(1))
      .subscribe((event: Event) => console.log(event.target));
}

Пропуск документов: https://www.learnrxjs.io/operators/filtering/skip.html

Из документов событий: https://www.learnrxjs.io/operators/creation/fromevent.html

Full StackBlitz Пример: https://stackblitz.com/edit/angular-dxmbgp