角9嵌套路由(3级)

Question

我有三个层次的嵌套路线。

级别:1

const MAIN_ROUTE: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: AppComponent,
  },
  {
    path: 'events',
    loadChildren: () => import('../app/modules/event/event.module').then(m => m.EventModule),
  },
];
..
RouterModule.forRoot(MAIN_ROUTE);

职等:2

const EVENT_ROUTE: Routes = [
  {
    path: '',
    component: EventComponent,
    children: {
           path: 'center',
           loadChildren: () => import('../app/modules/center/center.module').then(m => m.CenterModule),
    }
  },
  {
    path: '**',
    redircectTo: '/events/center'
    pathMatch: 'full'
  }
];
..
RouterModule.forChild(EVENT_ROUTE);

级别:3

const CENTER_ROUTE: Routes = [
  {
    path: '',
    component: CenterComponent
  },
  {
    path: '**',
    redircectTo: ''
    pathMatch: 'full'
  }
];
..
RouterModule.forChild(CENTER_ROUTE);

我的页面设置如下：

<app-main>
    <some-content></some-content>
    <router-outlet></router-outlet>
</app-main>

<app-event>
    <some-content></some-content>
    <router-outlet name="event"></router-outlet>
</app-event>

<app-center>
    <some-content></some-content>
    <router-outlet name="center"></router-outlet>
</app-center>

每当我导航到/events/center时，我都看不到CenterComponent的内容。我错过了什么吗？

Answer 1

您没有看到任何内容的原因是您的路由模块中没有匹配的路由。如果您的目的是提供多个命名的出口，则必须设置具有匹配的outlet属性的路由。

下面的示例来自这篇文章是关于使用多个出口的。

// use in template
<router-outlet name="sidebar"></router-outlet>  

// routing-module
{
   path: "",
   component: SidebarComponent,
   outlet: "sidebar"  <<<<<<< add this to resolve named routes
}

命名路径可能很有用，但它们变得非常复杂，而且可以创建一些古怪的URI。强烈建议尝试架构你的应用程序，将指定路线的数量保持在最小(如果可能的话)。