Angular 6 - 两个路由器插座

Question

我想在 Angular 6 中配置多个路由器插座，我的问题是我有第二个模板来更改 3 个页面，插座和名称不起作用。

<aside [hidden]="!menu">
  <button class="menu-btn" (click)="menu = false" routerLink="/" >Strona Główna</button>
  <button (click)="menu = false" routerLink="/portfolio" >Portfolio</button>
  <button (click)="menu = false" routerLink="/bio" >BIO</button>
  <button (click)="menu = false">Kontakt</button>
  <button (click)="menu = false">Coś</button>
</aside>
<button [class.aside]="menu" (click)="showMenu()">Klik</button>

<router-outlet></router-outlet>

我想要一个用于投资组合、简历和 kontakt 的模板。

<div class="background d-flex align-items-center ">
  <div class="container">
    <div class="text d-flex justify-content-center">
      Header
    </div>
  </div>

</div>
<div class="body">

  <router-outlet name="body" ></router-outlet>
  <!-- <div class="header d-flex justify-content-center">
      Portfolio
  </div> -->
</div>

app.module:

const appRoute = [
  { path: '', component: HomeComponent },
  { path: 'portfolio', component: PortfolioComponent, outlet: 'body' },
  { path: 'bio', component: BioComponent },
  { path: '**', component: HomeComponent }
]

Answer 1

你为什么要这样做？你什么时候可以做这样的事情？ Angular/router.io

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