Angular2 路由 - 当路由更改时保持组件的状态[重复]

Angular 2 路由 - 当路由更改时保持组件的状态

typescript
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
@Injectable()
export class ComponentStateService {
  private componentState: any = {};
  saveState(component: any, state: any): void {
    this.componentState[component.constructor.name] = state;
  }
  restoreState(component: any): any {
    return this.componentState[component.constructor.name] || null;
  }
}
@Injectable()
export class StateGuard implements CanActivate {
  constructor(private stateService: ComponentStateService) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    return true;
  }
}

typescript
import { Component, OnInit } from '@angular/core';
import { ComponentStateService } from './component-state.service';
@Component({
  selector: 'app-example',
  template: `
    
      输入框：
      
    
  `,
})
export class ExampleComponent implements OnInit {
  inputValue: string = '';
  constructor(private stateService: ComponentStateService) {}
  ngOnInit(): void {
    // 在组件初始化时，尝试还原之前保存的状态
    const savedState = this.stateService.restoreState(this);
    if (savedState) {
      this.inputValue = savedState.inputValue;
    }
  }
  ngOnDestroy(): void {
    // 在组件销毁时保存当前状态
    this.stateService.saveState(this, { inputValue: this.inputValue });
  }
}