Angular 5路由跳转前如何处理未保存的文本框内容？

看起来你已经找对了核心思路——监听路由跳转事件来触发保存，但现有代码还有几个细节可以优化，让功能更贴合需求（比如支持多次跳转、准确判断内容是否修改、返回时恢复内容）。下面是完整的实现方案：

先分析现有代码的小问题 #

1. 你把unsubscribe()放在了NavigationStart事件里，这意味着只会监听第一次路由跳转，之后就失效了，用户后续的跳转不会再触发保存。
2. 仅判断mytxtx.length>0不够准确——如果用户输入后又删除回原样，也会触发无意义的保存，应该对比「初始内容」和「当前内容」来确认是否真的修改过。
3. 缺少返回页面时的内容恢复逻辑，这是实现“继续编辑”的关键。

完整优化实现（以Angular为例） #

步骤1：组件内初始化状态与订阅管理 #

先在组件里定义必要的变量，同时处理订阅的销毁（避免内存泄漏）：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationStart, Event } from '@angular/router';

@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html'
})
export class TextEditorComponent implements OnInit, OnDestroy {
  // 初始内容（可以从接口获取，或默认空字符串）
  initialText: string = '';
  // 绑定到textarea的当前内容
  currentText: string = '';
  // 路由订阅的引用，用于组件销毁时取消订阅
  private routeSubscription: any;

  constructor(private router: Router) { }

  ngOnInit(): void {
    // 页面加载时先尝试恢复之前保存的内容
    this.restoreSavedText();
    // 开始监听路由变化
    this.subscribeToRouteChanges();
  }

  ngOnDestroy(): void {
    // 组件销毁时必须取消订阅，防止内存泄漏
    if (this.routeSubscription) {
      this.routeSubscription.unsubscribe();
    }
  }
}

步骤2：完善路由监听与保存逻辑 #

修改你的订阅方法，确保每次路由跳转都能触发检查，并且只在内容真的修改时保存：

private subscribeToRouteChanges(): void {
  this.routeSubscription = this.router.events.subscribe((event: Event) => {
    // 只关注路由开始跳转的事件
    if (event instanceof NavigationStart) {
      // 判断内容是否真的被修改，且有有效内容
      const isContentChanged = this.currentText !== this.initialText;
      const hasValidContent = this.currentText.trim().length > 0;

      if (isContentChanged && hasValidContent) {
        this.saveTextToStorage();
      }
    }
  });
}

// 将内容保存到本地存储（用唯一key避免和其他组件冲突）
private saveTextToStorage(): void {
  // 用localStorage会持久保存，关闭浏览器再打开也能恢复；用sessionStorage仅会话有效
  localStorage.setItem('editor-saved-content', this.currentText);
}

步骤3：返回页面时恢复内容 #

在组件初始化时调用恢复方法，让用户返回时能继续编辑：

private restoreSavedText(): void {
  const savedContent = localStorage.getItem('editor-saved-content');
  if (savedContent) {
    this.currentText = savedContent;
    // 可选：如果希望恢复后将当前内容视为新的初始值，避免再次跳转时误判为修改
    // this.initialText = savedContent;
  }
}

可选进阶：用路由守卫（CanDeactivate）更规范 #

Angular的CanDeactivate守卫是实现这类功能的更标准方式，它不仅能自动保存，还可以弹出确认框询问用户是否离开（完全复刻Stack Overflow的体验）：

1. 创建守卫服务

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { TextEditorComponent } from './text-editor/text-editor.component';

@Injectable({ providedIn: 'root' })
export class CanDeactivateEditorGuard implements CanDeactivate<TextEditorComponent> {
  canDeactivate(component: TextEditorComponent): boolean {
    const isChanged = component.currentText !== component.initialText;
    const hasContent = component.currentText.trim().length > 0;

    if (isChanged && hasContent) {
      // 自动保存内容
      component.saveTextToStorage();
      // 可选：弹出确认框，让用户选择是否离开
      // return confirm('你有未保存的内容，确定要离开吗？');
      return true;
    }
    return true;
  }
}

2. 在路由配置中使用守卫

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TextEditorComponent } from './text-editor/text-editor.component';
import { CanDeactivateEditorGuard } from './can-deactivate-editor.guard';

const routes: Routes = [
  {
    path: 'text-editor',
    component: TextEditorComponent,
    canDeactivate: [CanDeactivateEditorGuard]
  }
];

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

额外注意事项 #

• 给本地存储的key加上唯一标识（比如页面路径或组件ID），避免多个页面的编辑器互相干扰。
• 当用户主动点击“保存”按钮后，记得清空本地存储的备份，或者更新initialText的值，避免重复保存。
• 如果不需要持久化保存，改用sessionStorage代替localStorage，关闭浏览器后内容会自动清除。

内容的提问来源于stack exchange，提问作者Саске