Angular4页面数据变更时，切换标签/跳转页面如何提示用户？

针对你遇到的场景——在表单有未保存修改时，拦截TabView标签切换和侧边栏路由跳转并弹出确认框，ngOnDestroy()确实太晚了，因为它是组件销毁后才触发，没法提前阻止操作。下面给你一套完整的实现方案：

一、先跟踪表单的未保存状态 #

不管是用响应式表单还是模板驱动表单，我们需要一个状态来标记是否有未提交的修改。这里以响应式表单为例：

组件内代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ConfirmationService } from 'primeng/api';
import { TabChangeEvent } from 'primeng/tabview';

@Component({
  selector: 'app-my-form-page',
  templateUrl: './my-form-page.component.html'
})
export class MyFormPageComponent implements OnInit {
  myForm: FormGroup;
  hasUnsavedChanges = false;

  constructor(
    private fb: FormBuilder,
    private confirmationService: ConfirmationService
  ) {}

  ngOnInit(): void {
    // 初始化表单
    this.myForm = this.fb.group({
      username: [''],
      email: [''],
      bio: [''],
      role: ['']
    });

    // 监听表单值变化，标记未保存状态
    this.myForm.valueChanges.subscribe(() => {
      this.hasUnsavedChanges = this.myForm.dirty;
    });
  }

  // 保存表单后重置状态
  saveForm(): void {
    // 这里写你的保存逻辑（比如调用API）
    console.log('表单已保存');
    // 重置未保存标记
    this.myForm.markAsPristine();
    this.hasUnsavedChanges = false;
  }
}

二、拦截PrimeNG TabView的标签切换 #

PrimeNG的TabView提供了beforeChange事件，这是切换标签前的钩子，我们可以在这里插入确认逻辑：

模板代码（TabView部分） #

<p-tabView #tabView (beforeChange)="handleTabSwitch($event, tabView)">
  <p-tabPanel header="基本信息">
    <!-- 你的表单控件 -->
    <input type="text" pInputText formControlName="username" placeholder="用户名">
    <input type="email" pInputText formControlName="email" placeholder="邮箱">
  </p-tabPanel>
  <p-tabPanel header="详细资料">
    <textarea pInputTextarea formControlName="bio" rows="3" placeholder="个人简介"></textarea>
    <p-dropdown formControlName="role" [options]="roleOptions"></p-dropdown>
  </p-tabPanel>
</p-tabView>

组件内添加标签切换处理方法 #

handleTabSwitch(event: TabChangeEvent, tabView: any): void {
  if (this.hasUnsavedChanges) {
    // 先阻止默认切换行为
    event.preventDefault();

    this.confirmationService.confirm({
      message: '您有未保存的修改，确定要切换标签吗？',
      accept: () => {
        // 用户确认后，手动切换标签
        tabView.activeIndex = event.toIndex;
        // 可选：重置未保存状态（如果需要切换后清空标记）
        this.hasUnsavedChanges = false;
      },
      reject: () => {
        // 用户取消，保持当前标签不动
      }
    });
  }
}

三、拦截侧边栏的路由跳转（用Angular路由守卫） #

侧边栏跳转本质是路由变化，我们用Angular的CanDeactivate守卫来拦截离开当前路由的操作：

1. 创建CanDeactivate守卫 #

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { ConfirmationService } from 'primeng/api';

// 定义一个接口，让需要拦截的组件实现它
export interface HasUnsavedChanges {
  hasUnsavedChanges: boolean;
}

@Injectable({ providedIn: 'root' })
export class UnsavedChangesGuard implements CanDeactivate<HasUnsavedChanges> {
  constructor(private confirmationService: ConfirmationService) {}

  canDeactivate(
    component: HasUnsavedChanges,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 没有未保存修改，直接放行
    if (!component.hasUnsavedChanges) {
      return true;
    }

    // 有未保存修改，弹出确认框
    return new Observable<boolean>(observer => {
      this.confirmationService.confirm({
        message: '您有未保存的修改，确定要离开此页面吗？',
        accept: () => {
          observer.next(true);
          observer.complete();
        },
        reject: () => {
          observer.next(false);
          observer.complete();
        }
      });
    });
  }
}

2. 在路由配置中添加守卫 #

找到你的路由配置文件（比如app-routing.module.ts），给目标路由加上canDeactivate属性：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MyFormPageComponent } from './my-form-page/my-form-page.component';
import { UnsavedChangesGuard } from './unsaved-changes.guard';

const routes: Routes = [
  {
    path: 'form-page',
    component: MyFormPageComponent,
    canDeactivate: [UnsavedChangesGuard] // 添加上守卫
  },
  // 其他路由...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

3. 确保组件实现接口 #

你的表单组件已经有hasUnsavedChanges属性，所以自动符合HasUnsavedChanges接口的要求，不需要额外修改。

四、关键注意点 #

• 保存表单时一定要调用this.myForm.markAsPristine()或者把hasUnsavedChanges设为false，否则会一直拦截操作。
• 如果多个标签页各自有独立表单，可以给每个TabPanel的表单单独维护一个hasUnsavedChanges状态，在切换时检查当前标签的状态。
• PrimeNG的ConfirmationService需要在你的模块中注册（或者用providedIn: 'root'的方式，上面的守卫已经用了这个方式）。

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