为子组件启用candeactivate

Question

我在一个angular应用程序上工作，如果用户在编辑时留下未保存的更改，我需要显示一条警告消息。

我已经为此在路由中创建并注册了candeactivate卫士，它在父组件中运行良好。而不是使用子组件.How来解决这个问题？

{
    path: 'create',
    component: CreateComponent,
    canDeactivate: [ConfirmationGuard],
},
{
    path: ':id',
    component: ViewUserComponent,
    children: [
        {
            path: ':id',
            component: AddressComponent,
            canDeactivate: [ConfirmationGuard],
        },
    ],
    canDeactivate: [ConfirmationGuard],
},

“‘create”运行正常，但addresscomponent不工作，因为它是一个子组件！

ConfirmationGuard.ts：

import { Component } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { ConfirmLeaving } from './interface';

 export declare class ConfirmationGuard implements 
 CanDeactivate<ConfirmLeaving | Component> {

 canDeactivate(component: ConfirmLeaving | Component): Promise<boolean>;
 }

Answer 1

ConfirmationGuard需要是一个实际的服务...换句话说，它必须是@Injectable的，并且在一个模块中提供(或者您可以使用providedIn: root)。

Answer 2

如果AddressComponent有一个模块，您可以在@NgModule中imports部分下导入它自己的模块，以确保您已经导入了它的所有导入、声明或提供程序