Angular 中跨分模块后路由复用问题

当我们的 Angular 应用越来越大后,就需要考虑使用模块或者直接使用库来将解体应用,使用时进来懒加载,加快访问速度。当跨分模块后,普通的路由复用策略就是失效,需要额外的解决方法。

前提

angular 使用路由复用 这篇文章里介绍了如何使用路由复用。

angular 划分库 这篇文章里介绍了如何使用库的方式来减小应用复杂性。

问题

使用懒加载后,应用大概率会抛出 Cannot reattach ActivatedRouteSnapshot created from a different route 这个错误,这主要是因为,使用模块后,每个模块都可能会有 '' 这个路径来做默认路由,系统无法正确找到路由快照。

解决

解决方法也比较简单,既然是因为 key 重复,那就使用不会重复的名称来作为 key 就行。我这边的解决方案,是去定义一个自定义的结构来存储数据,Route 类型中提供了属性data,就是下面代码里的 data

const routes: Routes = [
{
    path: 'login',
    component: LoginComponent,
    data: { url: '/login' },
  },
];

复用策略中也使用 data 中的 url来实现快照的存储和还原。

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

export class AppRouteReuseStrategy implements RouteReuseStrategy {
  public static handlers: Map<string, DetachedRouteHandle | undefined> = new Map();

  constructor() { }

  public shouldDetach(_route: ActivatedRouteSnapshot): boolean {
    return true;
  }

  public store(
    route: ActivatedRouteSnapshot,
    handle: DetachedRouteHandle
  ): void {
    if (!route.data) return;
    AppRouteReuseStrategy.handlers.set(route.data['url'], handle);
  }

  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && !!AppRouteReuseStrategy.handlers.get(route.data['url']);
  }

  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    if (!route.data || !AppRouteReuseStrategy.handlers.has(route.data['url'])) return null;
    return AppRouteReuseStrategy.handlers.get(route.data['url'])!;
  }

  public shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}
发布时间:2022-09-05
其他阅读

Fetch发送请求

fetch 是 javascript 中一个新的 api,用于访问和控制 HTTP 的请求和响应等,不再需要使用传统的 XMLHttoRequest

查看原文

西华湿地公园

昆明周末好去处。

查看原文

管道技术——中间件的灵魂

在现代Web开发中,中间件技术使用越来越广泛,本文带大家了解中间件的基础,同时也是中间件的灵魂所在,管道技术。在C#中,依赖于委托,我们可以很容易就实现一个中间件管道。所以在阅读本文前,请确保你已经学会了什么是委托,包括但不限于Delegate,Action,Func。除此之外,本文还会使用到反射相关知识,请确保你已经学会了什么是反射。

查看原文

解决sqlite依赖无法打包单文件的问题

在一次WPF开发中,选用了sqlite作为内嵌数据库,使用 ystem.Data.SQLite 库来调用,在使用 Fody 进行单文件打包时,发现打包文成后会出现 x86 和 x64 两个特定的文件夹,分别对应着32位和64位的 SQLite.Interop.dll,本文介绍修改项目文件来实现将 sqlite 通信库一起打包成单文件的方法。

查看原文

Apple网页中滚动效果

打开Apple官网查看iPhone页面,我们可以看到一个特殊效果,当你滚动鼠标时,页面不出现滚动效果,但内容却在变化。现在,基于 position : sticky 可以很容易实现这个效果。

查看原文