angular - 为子组件启用 candeactivate

Question

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

我已经在路由中创建并注册了一个 candeactivate 保护，它在父组件中工作正常。但不能在子组件中工作。如何解决这个问题？

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

“创建”运行良好，但地址组件无法正常工作，因为它是子组件!

确认 guard .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)。