Angular 设置路由父子

Question

我是 Angular 的新手，我真的需要路由方面的帮助。这是我的文件夹结构：

有两种不同的布局，一种是登录页面的布局，一种是像通常的管理页面一样的主要布局，有侧边栏、工具栏等。

登录后，我希望它加载具有主布局的仪表板页面，但它只显示布局而不显示仪表板。

app-routing.module.ts

const accountModule = () => import('./features/account/account.module').then(x => x.AccountModule);
const mainModule = () => import('./features/main/main.module').then(x => x.MainModule);

const routes: Routes = [
  { path: '', loadChildren: mainModule, canActivate: [AuthGuard] },
  { path: 'account', loadChildren: accountModule },

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

帐号-routing.module.ts

const routes: Routes = [
  {
    path: '', component: LayoutComponent,
    children: [
        { path: 'login', component: LoginComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

主-routing.module.ts

const routes: Routes = [
  {
    path: '', component: LayoutComponent,
    children: [
        { path: 'dashboard', component: DashboardComponent },
        { path: 'client', component: ClientComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

如何修改路由，以便当我访问 http://localhost:4200 时它会显示带有主布局的仪表板页面，而不仅仅是布局？或者，如果不可能，将其重定向到 http://localhost:4200/dashboard？请帮忙。

Answer 1

在你的main-routing.module.ts 使用带有空字符串的完整匹配路径，将您重定向到所需的路径。

const routes: Routes = [
  {
    path: '', component: LayoutComponent,
    children: [
        { path: 'dashboard', component: DashboardComponent },
        { path: 'client', component: ClientComponent },
    ]
  },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },

];

编辑：更正顺序

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  {
    path: '', component: LayoutComponent,
    children: [
        { path: 'dashboard', component: DashboardComponent },
        { path: 'client', component: ClientComponent },
    ]
  },
];

Angular 设置路由父子

Angular set routing parent and children

typescript

angular-routing

angular