CanDeactivate在同一路径上的父级和子级组件表单不起作用

Question

我已经创建了一个具有子组件的组件，并且希望在用户使用消息“您要放弃更改？”从当前页面重定向到当前页面时显示对话框。

//Memberprofile-routing.module.ts
const routes: Routes = [
  { 
    path: 'memberprofile',
    component: MemberprofileComponent,
    canDeactivate: [CanDeactivateGuard],
    children: [
      {
        path: '',
        component: MemberSettingsComponent,
        canDeactivate: [CanDeactivateGuard],
      }
    ]
  }
];
//guard.ts
export interface CanComponentDeactivate {
  canDeactivate(): Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate>
{
  canDeactivate(component: CanComponentDeactivate, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

路由与MemberSettingsComponent是子组件，而MemberprofileComponent是父组件相同。

以上问题是否有更好的解决方案？这将对我有很大的帮助。