Angular 在延迟加载模块中使用路由器出口名称嵌套路由

Question

我正在尝试将嵌套路由与命名 router-outlet 一起使用来完成侧边栏导航的路由。
我有一个 main 模块加载 nav-component ，它的模板中有一个命名的路由器插座：

<router-outlet name="content"></router-outlet>

现在我有多个 nav-links 使用 router-link 指令到 link 例如：http://localhost:4200/ticket:

<a routerLink="ticket">New Ticket</a>

此模块的路由定义在模块本身中：

#main.module.ts

const routes: Routes = [
  { path: '', component: NavComponent, children: [
    { path: 'ticket', component: NewTicketComponent, outlet: 'content' }
  ]},
]

@NgModule({
  declarations: [NavComponent, NewCustomerDialogComponent, NewTicketComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ]
})
export class MainModule { }

因此，当您导航到：localhost:4200/ticket 我希望 NavComponent 可见，并且 NewTicketComponent 被插入到命名的 router-outlet

这是我的 app-routing.module.ts 的样子：

#app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginModule } from './login/login.module';

const routes: Routes = [
  { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) },
  { path: '', loadChildren: () => import('./main/main.module').then(m => m.MainModule) },
  // { path: '**', redirectTo: 'login' }
];

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

我收到以下错误：

Error: Cannot match any routes. URL Segment: 'ticket'

Answer 1

你需要在routerLink中提到插座的名称，就像这样：

  <a [routerLink]="[{ outlets: { content: 'main/ticket'}}]">

Answer 2

我设法使用嵌套 router-outlets 使其正常工作，但未命名它们。

我只是在 NavComponent 模板中制作了一个 <router-outlet></router-outlet> 元素。然后我简单地定义了这样的嵌套路由：

#main.module.ts
const routes: Routes = [
  { path: 'main', component: NavComponent, children: [
    { path: 'ticket/new', component: NewTicketComponent}
  ]},
];

Angular 在延迟加载模块中使用路由器出口名称嵌套路由

Angular nested Routing in lazy loading Modules with router-outlet name

lazy-loading

angular-routing

angular