我使用ngx烤面包机(使用角度/动画(来显示烤面包。如果我从手动创建的事件中触发它们，那么我在动画中会有很大的延迟。
export class AppComponent {
@ViewChild('iframeElement') iframeElement: ElementRef;
html = `<!DOCTYPE html><html lang="en"><head><title></title></head><body><div>2. Step 2</div><ul><li>Wait when toast is gone</li><li>Click here 3 times quickly</li><li>Wait few seconds to see toasts</li></ul></body></html>`;
constructor(private toastr: ToastrService,
private renderer: Renderer2) {
}
load(e) {
console.log('Iframe Loaded');
const iframe = this.iframeElement.nativeElement;
this.renderer.listen(iframe.contentDocument, 'click', (e) => {
e.preventDefault();
console.log('Iframe body clicked', e, e.target);
this.showMessage('Message From Iframe');
});
}
showMessage(message: string) {
this.toastr.success(message);
}
}
和模板：
<button type="button" (click)="showMessage('Just a message')">1. Press Me</button>
<div>
<iframe #iframeElement src="about:blank" (load)="load($event)" [srcdoc]="html" frameborder="1"></iframe>
</div>
我可以看到toast会立即添加到DOM中，但在添加到DOM后几秒钟就会显示出来。
这是的演示
来自iframe的事件在Angular区域之外处理。你应该在里面处理它们：
import { NgZone } from '@angular/core';
constructor(...private ngZone: NgZone) {}
load(e) {
...
this.renderer.listen(iframe.contentDocument, 'click', (e) => {
...
this.ngZone.run(() => this.showMessage('Message From Iframe'));
^^^^^^^^^^^^^^^^^^
});
}
叉式堆垛机