Angular 7基于URL参数懒加载模块配置问题求助

我来帮你搞定这个问题！你遇到的核心问题是Angular路由的匹配优先级规则——你在PageModule里把参数化路由:type-of-items放在了具体的foo懒加载路由前面，导致路由匹配逻辑出错了。

当你访问/page/foo/item-a时，Angular会从上到下扫描路由配置，第一个匹配到的是:type-of-items，它会把foo当成参数值直接带入PageComponent，根本不会走到下面的foo懒加载路由。而PageComponent没有配置对应item-a的子路由，最终就会触发根路由里的NotFoundPageComponent。

解决方案：调整路由匹配顺序 #

只需要修改PageModule里的路由顺序，把具体的路由规则放在参数化路由前面，让Angular优先匹配明确的路径，再处理动态参数的情况：

修改后的page.module路由配置：

const routes: Routes = [
  // 优先匹配具体的懒加载模块路由
  { path: 'foo', loadChildren: '../foo.module#FooModule' },
  // 最后匹配参数化路由，处理其他未明确定义的type-of-items值
  { path: ':type-of-items', component: PageComponent }
];

修改后的逻辑说明 #

• 当访问/page/foo/item-a时，Angular会先匹配到foo路由，懒加载FooModule，然后FooModule里的子路由会正确匹配item-a，渲染ItemAComponent；
• 当访问其他类似/page/bar的路径时，会匹配到:type-of-items路由，进入PageComponent并获取到type-of-items参数值为bar，满足你获取上下文数据的需求。

如果之后你的PageComponent也需要处理子路由（比如/page/bar/item-c这类路径），记得在PageComponent的模板中添加<router-outlet></router-outlet>，并给:type-of-items路由配置对应的子路由规则即可。

内容的提问来源于stack exchange，提问作者Jeff Fohl