如何在Header触发Logout时检测表单Dirty状态并提示保存？

核心思路 #

拦截Header中的登出操作，先校验主内容区表单的脏状态，根据用户选择执行「保存后登出」或「直接登出」，避免绕过原有表单校验逻辑。

具体实现步骤 #

1. 创建共享状态服务 #

通过全局服务实现Header与Main组件的状态共享和逻辑复用：

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FormGuardService {
  private isFormDirty = false;

  // 更新表单脏状态
  updateFormDirtyStatus(status: boolean): void {
    this.isFormDirty = status;
  }

  // 登出前校验逻辑
  checkBeforeLogout(): Observable<boolean> {
    // 表单无修改，直接放行登出
    if (!this.isFormDirty) {
      return of(true);
    }

    return new Observable(observer => {
      const userChoice = confirm('表单内容已修改，是否保存后再登出？');
      
      if (userChoice) {
        // 执行表单保存逻辑（替换为你的实际保存方法）
        this.saveFormData().then(() => {
          observer.next(true);
          observer.complete();
        });
      } else {
        // 用户放弃保存，直接登出
        observer.next(true);
        observer.complete();
      }
    });
  }

  // 模拟表单保存（实际项目替换为真实接口调用）
  private saveFormData(): Promise<void> {
    return new Promise(resolve => {
      // 这里写你的保存逻辑，比如调用HTTP请求
      setTimeout(() => resolve(), 1000);
    });
  }
}

2. Main组件同步表单状态 #

在Main组件中监听表单脏值变化，实时同步到共享服务：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormGuardService } from './form-guard.service';

@Component({
  selector: 'app-main',
  templateUrl: './app-main.component.html'
})
export class AppMainComponent implements OnInit {
  form: FormGroup;

  constructor(
    private fb: FormBuilder,
    private formGuardService: FormGuardService
  ) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      // 定义你的表单控件
      username: [''],
      email: ['']
    });

    // 监听表单状态变化，同步脏状态到服务
    this.form.statusChanges.subscribe(() => {
      this.formGuardService.updateFormDirtyStatus(this.form.dirty);
    });
  }
}

3. 修改Header组件的登出逻辑 #

将原有的直接登出替换为带校验的方法：

import { Component } from '@angular/core';
import { KeycloakService } from 'keycloak-angular';
import { FormGuardService } from './form-guard.service';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html'
})
export class AppHeaderComponent {
  constructor(
    private keycloakService: KeycloakService,
    private formGuardService: FormGuardService
  ) {}

  handleLogout(): void {
    this.formGuardService.checkBeforeLogout().subscribe(allowLogout => {
      if (allowLogout) {
        this.keycloakService.logout();
      }
    });
  }
}

4. 更新Header模板绑定 #

把模板中直接调用登出的地方改为绑定新的方法：

<a (click)="handleLogout()">登出</a>

内容的提问来源于stack exchange，提问作者NgNewbie