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 - родительский.

Есть ли лучшее решение для вышеуказанной проблемы? это мне очень поможет.