角路由延迟加载儿童的孩子

Question

我目前被困在角度路由的工作原理上，需要一些帮助。基本上在我的项目中，我有一个核心模块，用于加载所有根路由，主页如下：

const routes: Routes = [
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'user', loadChildren: 'app/userManagement#UserModule', pathMatch: 'full',canActivate: [AuthGaurd] },
  {path: '**', component: PageNotFoundComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

在应用程序/用户管理文件夹中，我有一个用于导入和声明所有模块的 index.ts：

@NgModule({
  imports: [
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

我的子路由放在用户管理路由模块中：

const routes: Routes = [
  {
    path: '',
    component: UserHomeComponent,
  },
  {
    path: 'userDetails',
    component: UserDetailsComponent
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserManagementRoutingModule {
}

这样，当我转到 http://hostname/user 时，它将定向到我的UserHomeComponent组件，但是如果我转到 http://hostname/user/userDetails Angular不会重定向到该页面。我应该如何编辑我的代码，以便我可以访问userDetailsComponent？

谢谢

Answer 1

延迟加载时，最佳做法是将所有在空白路径下路由定义为子路径。此外，您需要确保在您的@ngModule中导入CommonModule或BrowserModule（在您的情况下，因为它是一个孩子，您将使用 common）。

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    UserManagementRoutingModule
  ],
  declarations: [UserHomeComponent, UserListComponent, UserDetailsComponent]
})
export class UserModule {
}

以上将确保组件正确加载，以下内容将提供最佳实践路由。

const routes: Routes = [
  {
    path: '',
    children: [
      { path: '', component: UserHomeComponent },
      { path: 'userDetails', component: UserDetailsComponent }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserManagementRoutingModule {
}

Answer 2

删除父组件中的pathMatch: 'full'，为我解决了这个问题。我需要这个解决方案，因为我想有一个父包装容器，带有一些视图逻辑，我不想在每个子视图中重复。

工作解决方案：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ComponentsDemoComponent } from './components-demo.component';
const routes: Routes = [
    {
        path: '',
        component: ComponentsDemoComponent,
        // pathMatch: 'full', <<< REMOVE
        children: [
            {
                path: 'modalv3-demo',
                loadComponent: () =>
                    import('./modalv3-demo/modalv3-demo.component').then(
                        (c) => c.Modalv3DemoComponent
                    ),
            },
        ],
    },
    {
        path: '**',
        redirectTo: '',
    },
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class ComponentsDemoRoutingModule {}