Question

我有用户使用Angular5应用。我使用延迟加载，以便用户页面的网址类似于http://example.com/user/:name。但我想将网址更改为http://example.com/:name。是否有任何解决方案可以通过保持延迟加载来实现它？

Answer 1

可悲的是，这是不可能的。

想象一下以下场景。您可以为app.module定义路线，如下所示：

const routes: Routes[] = [{
      path: '',
      component: HomeComponent
   }, {
      path: ':someIdentifier1',
      loadChildren: 'app/somesubpath1/somemodule1#SomeModule1
   }, {
      path: ':someIdentifier2',
      loadChildren: 'app/somesubpath2/somemodule2#SomeModule2'
   }
]

路由器无法在通向/ somesubpath1 / abcd的路由器链路和通向/ somesubpath2 / abcd的路由器链路之间进行distingush，因此无法实现。

Answer 2

您可以尝试一种解决方法，一个包装模块然后懒洋洋地加载您的路线。像这样：

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '**',
        component: WrapperComponent,
        children: [{
            path: ':user',
            loadChildren: 'user-module#UserModule',
        }]
      },
    ])
  ],
  exports: [RouterModule]
})
export class WrapperRoutingModule { }

Answer 3

在我的应用程序中，我完全按照您的要求进行操作，但是我没有使用延迟加载。对我来说似乎工作得很好，我不明白为什么延迟加载会产生影响因为路由器路径匹配应该是全面的。如果我错了，请随意纠正我！

我所做的是确保我在顶部包含硬路径的模块，并将catch-all路由模块放在最底层。这样，找到的那些将被加载，其他所有东西都将加载catch-all路径。

例如，这是我的AppModule：

@NgModule({
    imports: [
        // ...

        HomeModule,
        // other page modules here...

        // UserModule should always go last since it has a catchall URL path in its routes
        // to find user by username, for example /@Lansana.
        UserModule
    ],
    providers: [...],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

正如您所看到的，UserModule列在最后，因为它是具有全能路线的那个。

我想你可以采用与延迟加载相同的方法。试一试。

Angular5保持延迟加载但不在url中添加中间级别

3 个答案: