Question

我有两个模块（clientModule，AdminModule）

默认情况下，客户端模块已加载。

客户端模块路由配置

const _routes: Routes = [
  {
    path: ':id', component: appComponent, children: [
      { path: 'page1', component: page1Component},
      { path: 'admin', loadChildren:  './admin/admin.module#AdminModule' }
    ]
  }
];

管理模块路由配置

const _routes: Routes = [
  {
    path: '', component: AdminComponent, children: [
      { path: 'adminPage1', component: adminPage1Component},
      { path: 'adminPage2', component: adminPage2Component},

    ]
  }

];

管理组件具有布局结构。

问题

加载adminModule时，我需要将adminModule adminPage1作为路由器出口的默认组件。
如何通过adminModule中的.ts文件进行导航？

Answer 1

如果有人遇到相同的问题，我可以通过以下方式解决。

管理模块路由配置

const _routes: Routes = [
  {
    path: '', component: AdminComponent, children: [
      { path: ' ', component: adminPage1Component},
      { path: 'adminPage1', component: adminPage1Component},
      { path: 'adminPage2', component: adminPage2Component},

    ]
  }
];

通过在子数组中添加一个空路径（ {path：''，component：adminPage1Component} ）来默认

加载组件。

此外，如果有一个元素，则在加载组件时需要在css类中添加元素。例如：

 <li routerLink="adminPage1" routerLinkActive="active">
          Admin Page 1
 </li>

您可以执行以下操作以支持routerLinkActive

const _routes: Routes = [
  {
    path: '', component: AdminComponent, children: [
      { path: ' ', component: adminPage1Component, redirectTo: 'adminPage1',  pathMatch: 'full'},
      { path: 'adminPage1', component: adminPage1Component},
      { path: 'adminPage2', component: adminPage2Component},

    ]
  }
];

我基本上在空路径中添加了“ redirectTo：'adminPage1'，pathMatch：'full'”。

加载新模块时，Angular Routes为路由器出口设置默认组件

1 个答案: