使用 Angular，如何检查表单是否已从标头更新（脏）？

Question

我的申请的结构大致如下：

<app-header></app-header> <app-main></app-main> <app-footer></app-footer>

标题包含此命令的链接：

this.keycloakService.logout();

它绕过了主要部分中的

"if (component.form.dirty)"

。我想问问用户，发生这种情况时是否要保存。

Answer 1

为此，您可以在表单路由定义上使用

canDeactivate

防护：

// route

{
  path: APP_PATHS.SECTION.ASSIGN + '/:personId',
  loadComponent: () =>
    import(
      '../person/person-assign/person-assign.component'
    ).then((m) => m.PersonAssignComponent),
  canDeactivate: [formDeactivateGuard]
}

// guard

import { inject } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { DialogService } from '@shared/services/dialog.service';
import { FormService } from '@shared/services/form.service';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const formDeactivateGuard: CanDeactivateFn<any> = async () => {
    const formService = inject(FormService);
    const dialogService = inject(DialogService);

    if (formService._isDirty.getValue()) {
        return await dialogService
            .openConfirmDialog({
                title: 'form.unsaved-changes.title',
                message: 'form.unsaved-changes.message',
                confirmKey: 'common.leave',
                cancelKey: 'common.cancel',
            })
            .then((result) => {
                if (result) {
                    formService.setDirty(false);
                    return Promise.resolve(true);
                } else {
                    return Promise.resolve(false);
                }
            });
    } else {
        return Promise.resolve(true);
    }
};


// service 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root',
})
export class FormService {
    public _isDirty = new BehaviorSubject<boolean>(false);

    public setDirty(isDirty: boolean) {
        this._isDirty.next(isDirty);
    }
}