解决 Angular 应用中关闭路由后返回上一页出现错误的问题-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 应用中，我们经常会使用路由功能来实现页面的跳转。但是，在关闭某个路由页面后，当我们返回前一页时，有时会出现错误，导致页面的展示和功能受到影响。这个问题看似不大，但却十分影响用户的体验，因此我们需要找到一种方法来解决这个问题。

问题分析

在关闭路由后返回上一页时，我们常常会使用浏览器默认提供的返回按钮。这时，如果关闭的路由页面中有一些需要进行异步加载的组件或者数据，而这些数据需要一定的时间才能加载完成，当用户点击返回按钮后，路由页面已经关闭了，异步加载的过程也被中断了。当我们再次返回前一页时，页面可能会因为数据加载未完成而出现错误。

这种问题，其实是因为默认情况下，浏览器返回上一页时是重新加载之前已经加载过的页面，而不是恢复到之前的页面状态。因此出现了上述情况。

解决方案

为了解决这个问题，我们需要对我们的路由进行一些配置和处理。具体来说，我们需要保留路由页面的状态，当用户返回时，能够恢复到之前离开的状态。

方案一：保存路由页面状态

一个简单的实现方式是在路由配置中添加一个 skipLocationChange 参数来确保取消路由页面时不改变 URL。在下一个路由导航开始之前，你可以使用 LocalStorage 对数据进行缓存，这样就可以在用户关闭路由后恢复状态了。这种方案虽然简单，但是需要不断地保存和更新数据，不利于性能优化。

// javascriptcn.com 代码示例
export const routes: Routes = [
  {
    path: 'page1',
    component: Page1Component
  },
  {
    path: 'page2',
    component: Page2Component
  },
  // ...
  {
    path: '**',
    redirectTo: 'page1'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // 配置 skipLocationChange 参数
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64],
    onSameUrlNavigation: 'reload',
    initialNavigation: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

方案二：使用 Angular 自带的 RouteReuseStrategy

RouteReuseStrategy 是 Angular 提供的机制，它能够重用路由和组件，避免每次路由切换时的数据加载等操作。因此，我们可以通过定义自己的 RouteReuseStrategy 类，来解决我们上面提到的问题。

// javascriptcn.com 代码示例
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';

interface IRouteStorageObject {
  snapshot: ActivatedRouteSnapshot;
  handle: DetachedRouteHandle;
}

export class CustomReuseStrategy implements RouteReuseStrategy {
  routesToCache: string[] = ['page2'];

  storedRouteHandles = new Map<string, IRouteStorageObject>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return this.routesToCache.includes(route.routeConfig.path);
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const storedRoute: IRouteStorageObject = {
      snapshot: route,
      handle
    };

    this.storedRouteHandles.set(route.routeConfig.path, storedRoute);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const path = route.routeConfig.path;
    return !!path && this.storedRouteHandles.has(path);
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    const path = route.routeConfig.path;
    const storedRoute: IRouteStorageObject = this.storedRouteHandles.get(path);

    return storedRoute ? storedRoute.handle : null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

使用 RouteReuseStrategy 的方式相比方案一，有以下优点：

方案一需要手动保存和更新数据，而这种方式会自动保存和更新组件状态。
方案二还能够避免重复渲染组件，避免了一些无谓的性能浪费。

示例代码

看完理论部分之后，我们一起来看一下实际的实现过程。在这个简单的示例中，我们将实现一个具有两个路由的 Angular 应用，一个是首页 page1，另一个是详情页 page2。当我们从首页跳转到详情页时，详情页会进行异步数据加载。如果我们在详情页加载完成之前就退出了该页面，再次跳回详情页就会出现错误。我们可以通过上述提到的方案来解决这个问题：

// javascriptcn.com 代码示例
@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: CustomReuseStrategy
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

可以看到，我们在 AppModule 中为应用提供了一个 CustomReuseStrategy 的实例，这样 Angular 就会自动调用这个实例来重用路由和组件。

// javascriptcn.com 代码示例
@Component({
  selector: 'app-page2',
  templateUrl: './page2.component.html'
})
export class Page2Component implements OnInit, OnDestroy {
  detail: any;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private httpClient: HttpClient
  ) { }

  ngOnInit(): void {
    this.activatedRoute.paramMap.subscribe(res => {
      const id = res.get('id');

      this.httpClient.get(`https://jsonplaceholder.typicode.com/posts/${id}`).subscribe((data: any) => {
        this.detail = data;
      });
    });
  }

  ngOnDestroy(): void {
    // 每次离开页面都需要手动保存数据
    sessionStorage.setItem(this.router.url, JSON.stringify(this.activatedRoute.snapshot));
  }

  goBack(): void {
    this.router.navigateByUrl('/');
  }
}

在 Page2Component 中，我们使用 httpClient 对详情数据进行了异步加载，并在离开页面时将数据保存到 LocalStorage 中。

// javascriptcn.com 代码示例
export class CustomReuseStrategy implements RouteReuseStrategy {
  routesToCache: string[] = ['page2'];

  storedRouteHandles = new Map<string, IRouteStorageObject>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return this.routesToCache.includes(route.routeConfig.path);
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const storedRoute: IRouteStorageObject = {
      snapshot: route,
      handle
    };

    this.storedRouteHandles.set(route.routeConfig.path, storedRoute);
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const path = route.routeConfig.path;
    return !!path && this.storedRouteHandles.has(path);
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    const path = route.routeConfig.path;
    const storedRoute: IRouteStorageObject = this.storedRouteHandles.get(path);

    return storedRoute ? storedRoute.handle : null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

最后，我们在 CustomReuseStrategy 中进行路由处理。当路由页面发生变化的时候，我们会同时从 LocalStorage 取出之前保存的组件状态，以便进行状态恢复。

总结

上文我们介绍了两种方法来解决 Angular 应用中关闭路由后返回上一页出现错误的问题。第一种方法是手动保存和更新数据，并通过 LocalStorage 进行缓存；第二种方法是使用 Angular 自带的 RouteReuseStrategy 机制，实现路由和组件的重用。根据实际情况，我们可以选择适合自己的方案，提升应用的体验和性能。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651d9dd795b1f8cacd53a6a3