1

我有一个应用程序，在我的 app.component.html 中有一个路由器插座，但是一个名为 EventDetailsComponent 的嵌套组件我想要另一个带有两个子路由的路由器插座。

简单地说，我只需要一个组件（EventDetailsComponent），它有自己的视图，还有 2 个可以路由到的子视图。当父/子组件初始化时，我将默认导航到 createSession 组件

我遇到的问题是当我尝试在 addSession() 方法中导航时出现此错误：

error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'events/2'

在按钮或锚标记上使用 routerLink 指令时，我没有这个问题，如下所示：<button [routerLink]="['/events/2', {outlets: {'nav': ['session']}}]"></button>

    export class EventDetailsComponent {


      constructor(private eventService:EventService,
                  private router: Router, private route: ActivateRoute) {
      }


      addSession() {
        this.router.navigate(['/events',2, {outlets: {'nav': ['session']}}]);
      }

    }

eventDetailComponent.html 

    <div>
         <router-outlet name="nav"></router-outlet>
     </div>

在 app.module 中加载的 Routes.ts 

    export const appRoutes:Routes = [
      { path: 'events', component: EventsListComponent }, 
      { path: 'events/:id', component: EventDetailsComponent, resolve: {event: EventResolver}, children:[
        {path:'event', component: createEvent, outlet:'nav' },
        {path:'session', component: createSession, outlet:'nav' }
      ] }
    ]

我真的很想知道在使用 router-outlet 时如何正确地为 router.navigate() 提供参数。特别是为什么找不到提供父路由'/events，2，...'？任何想法将不胜感激

4

0 回答 0