您可以在父路由器插座中显示您的子路由吗？答案

【问题标题】：Can you display your child routes in the parent router-outlet?您可以在父路由器插座中显示您的子路由吗？
【发布时间】：2018-11-29 10:40:34
【问题描述】：

主要问题：有没有办法显示到父路由器出口的子路由？

考虑Angular.io 路由器指南中的这个例子。

主要路线片段：

  const appRoutes: Routes = [
      ...
      {
        path: 'admin',
        loadChildren: 'app/admin/admin.module#AdminModule',
        canLoad: [AuthGuard]
      },
      {
        path: 'crisis-center',
        loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
        data: { preload: true }
      },
      ....
    ];

主要组件片段：

@Component({
  selector: 'app-root',
  template: `
    <h1 class="title">Angular Router</h1>
    <nav>
      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
      <a routerLink="/superheroes" routerLinkActive="active">Heroes</a>
      <a routerLink="/admin" routerLinkActive="active">Admin</a>
      ...
    </nav>
    <router-outlet></router-outlet>
  `
})

危机中心路线片段：

const crisisCenterRoutes: Routes = [
  {
    path: '',
    component: CrisisCenterComponent,
    children: [
      {
        path: '',
        component: CrisisListComponent,
        children: [
          {
            path: ':id',
            component: CrisisDetailComponent,
            ...
          },
          {
            path: '',
            component: CrisisCenterHomeComponent
          }
        ]
      }
    ]
  }
];

危机列表组件片段：

@Component({
  template: `
    <ul class="items">
      <li *ngFor="let crisis of crises$ | async"
        [class.selected]="crisis.id === selectedId">
        <a [routerLink]="[crisis.id]">
          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
        </a>
      </li>
    </ul>

    <router-outlet></router-outlet>
  `
})

CrisisDetailComponent 片段：

@Component({
  template: `
  <div *ngIf="crisis">
    <h3>"{{ editName }}"</h3>
    ...
  </div>
  `
})

这个路由器的输出是这样的：

所以。我想说的是当你点击说Dragon Burning Cities，而不是显示在下面，为什么不直接显示在CrisesListComponent级别？

我能想到的就是在 CrisesListComponent 中像这样使用 *ngIf ：

@Component({
  template: `
    <ul class="items" *ngIf="a list is selected hide this!!!">
      <li *ngFor="let crisis of crises$ | async"
        [class.selected]="crisis.id === selectedId">
        <a [routerLink]="[crisis.id]">
          <span class="badge">{{ crisis.id }}</span>{{ crisis.name }}
        </a>
      </li>
    </ul>

    <router-outlet></router-outlet>
  `
})

有没有想把子路由器设置成这个父路由出口上的显示？

谢谢。我希望我已经把我的问题说清楚了。

【问题讨论】：

从这个线程stackoverflow.com/questions/42841976/… 中得到了一个很好的例子。使用示例stackblitz.com/edit/angular-routing-page-layout... 但是注入组件的指令出错 - 对于角度 6

标签： angular-routing angular6 router-outlet

【解决方案1】：

我认为您可以通过将名称添加到 <router-outlet> 选择器并将具有该名称的出口属性添加到子路由。 HTML：

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

儿童路线模块：

path: '',
component: CrisisCenterComponent,
outlet: "test"

试试吧，你可能会遇到这个孩子的嵌套路由的一些问题。

【讨论】：