Question

正在开发一个有角度的应用程序，如果用户在编辑时离开页面时未保存更改，我需要显示一条警告消息。

我已在路由中创建并注册了一个可以取消激活的警戒，为此它在父级组件中运行良好。但是不能在子组件中工作。如何解决此问题？

{
    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，并且必须在模块中提供（或者您可以使用Provided：root）。

Answer 2

如果AddressComponent有模块，则可以在@NgModule的imports部分下导入其自己的模块，以确保将其所有导入，声明或提供程序都导入了

为子组件启用candeactivate

2 个答案: