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
          }
        ]
      }
    ]
  }
];

Angular 6-两个路由器插座

1 个答案: