Angular 9 条嵌套路线（3 层）

Question

我有 3 个级别的嵌套路线。

等级：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 属性.

的路由

以下例子来自this article about using multiple outlets.

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

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

命名路由可能很有用，但它们会很快变得复杂，并且会创建一些 古怪的 URI。强烈建议尝试构建您的应用程序以将命名路由的数量保持在最低限度（如果可能）。

Angular 9 条嵌套路线（3 层）

Angular 9 nested routes (3 levels)

angular-routing

angular

angular-router

angular9