CanDeactivate在iFrame中不触发

在iFrame中触发CanDeactivate需要在父组件中添加一些额外的代码。具体步骤如下：

1. 在父组件中注入Router并在构造函数中定义一个路由事件的观察者：

import { Router, NavigationEnd } from '@angular/router'; import { HostListener } from '@angular/core';

export class ParentComponent { constructor(private router: Router) { this.router.events.subscribe(event => { if (event instanceof NavigationEnd) { // Do something } }); }

@HostListener('window:beforeunload', ['$event']) unloadNotification($event: any) { // Do something } }

2. 在iFrame的src中添加一个参数：

<iframe [src]="url + '?embedded=true'"></iframe>

3. 在CanDeactivate守卫中添加以下代码：

canDeactivate( component: ComponentCanDeactivate, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot ): Observable<boolean> | Promise<boolean> | boolean { if (this.isEmbedded()) { // Do something } else { return component.canDeactivate ? component.canDeactivate() : true; } }

4. 编写isEmbedded函数：

private isEmbedded(): boolean { return window.location.search.indexOf('embedded=true') > -1; }

这样就可以在iFrame中正确触发CanDeactivate了。