Angular 4路由状态机制及页面返回避免重复加载的技术咨询

我来帮你逐个理清这两个问题：

问题1：Angular 4中的路由是否仅在导航过程中持有单一状态？ #

默认情况下，Angular 4的路由系统确实是单一活跃状态的——每次导航到新路由时，当前激活的组件实例会被销毁，新路由对应的组件会被初始化。也就是说，同一时间只有当前路由对应的组件处于活跃状态，之前的组件状态不会被默认保留。

当然，这个“单一状态”是原生默认行为，如果你通过自定义配置（比如后面要讲的路由复用策略），是可以让特定组件实例被保留的，但默认的路由逻辑就是维护单一活跃组件实例。

问题2：从A导航至B时状态A是否已被销毁？如何避免返回时重复加载？ #

组件A是否被销毁？ #

没错，默认情况下，当你从路由A跳转到路由B时，组件A的实例会被Angular销毁，它的ngOnDestroy生命周期钩子会被触发。所以当你从B返回A时，Angular会重新创建组件A的实例，执行ngOnInit等初始化方法，这就是你看到“重新加载”的原因。

避免返回时重复加载的几种实用方案 #

• 自定义RouteReuseStrategy（路由场景首选）
  Angular提供了RouteReuseStrategy抽象类，让我们能自定义路由组件的复用逻辑。你可以创建一个自定义策略，指定哪些路由的组件需要被保存状态，这样导航离开时组件实例不会被销毁，返回时直接复用已有的实例，状态自然也就保留了。

给你一个简单的实现示例：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes = new Map<string, DetachedRouteHandle>();

  // 判断是否复用当前路由
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  // 判断是否需要保存当前路由的组件实例
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 这里指定要复用的路由，比如路径为'a'的组件
    return route.routeConfig?.path === 'a';
  }

  // 保存组件实例到缓存
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const key = route.routeConfig?.path || '';
    this.storedRoutes.set(key, handle);
  }

  // 判断是否可以恢复之前保存的组件实例
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const key = route.routeConfig?.path || '';
    return this.storedRoutes.has(key);
  }

  // 从缓存中恢复组件实例
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const key = route.routeConfig?.path || '';
    return this.storedRoutes.get(key) || null;
  }
}

然后在AppModule的providers数组里注册这个策略，替换默认的路由复用逻辑：

@NgModule({
  // ...其他配置
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule { }

• 用共享服务保存组件状态
  如果你的需求只是保留组件A的数据，不需要保留组件实例本身，可以创建一个全局共享服务，在组件A销毁前把需要保存的数据存入服务，当组件A重新初始化时，先从服务中读取数据，避免重复加载。

示例服务：

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

@Injectable({ providedIn: 'root' })
export class StateAService {
  private savedData: any;

  saveData(data: any) {
    this.savedData = data;
  }

  getData() {
    return this.savedData;
  }
}

然后在组件A中使用这个服务：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { StateAService } from './state-a.service';

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html'
})
export class ComponentA implements OnInit, OnDestroy {
  componentData: any;

  constructor(private stateAService: StateAService) {}

  ngOnInit() {
    // 初始化时先从服务取数据
    this.componentData = this.stateAService.getData();
    if (!this.componentData) {
      // 如果没有保存的数据，再执行加载逻辑
      this.loadComponentData();
    }
  }

  ngOnDestroy() {
    // 组件销毁前，把当前数据保存到服务
    this.stateAService.saveData(this.componentData);
  }

  private loadComponentData() {
    // 这里写你的数据加载逻辑，比如HTTP请求、本地存储读取等
  }
}

• 用*ngIf控制组件显隐（适合简单场景）
  如果你的页面结构比较简单，不需要利用路由的历史记录、路径参数等特性，可以在父组件中用*ngIf来控制组件A和组件B的显示与隐藏，而不是使用路由跳转。这样组件实例不会被销毁，状态会一直保留。

比如父组件模板：

<app-component-a *ngIf="isShowingA"></app-component-a>
<app-component-b *ngIf="!isShowingA"></app-component-b>
<button (click)="toggleComponents()">切换页面</button>

父组件逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  isShowingA = true;

  toggleComponents() {
    this.isShowingA = !this.isShowingA;
  }
}

这种方法的优点是简单直接，但缺点是无法使用路由的各种特性，只适合小型应用或简单页面切换场景。

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