Question

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

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

现在，我有多个导航链接，这些导航链接使用router-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 { }

我遇到以下错误：

错误：无法匹配任何路由。网址段：“门票”

Answer 1

您需要在routerLink中提及出口的名称，就像这样：

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

Answer 2

我设法使用嵌套的router-outlets使其工作，而没有命名它们。

我只是在<router-outlet></router-outlet>模板中创建了NavComponent元素。然后，我像这样简单地定义嵌套路由：

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

带有路由器出口名称

2 个答案: