在一个routerLink中导航主插座和命名插座

时间:2017-11-01 18:33:06

标签: angular angular-router

是否可以同时在同一个routerLink中导航主插座和命名插座?我尝试过不同的组合,但似乎没有任何效果。

app.routing.ts

{ 
  path: 'test', 
  component: RedComponent,
},
{
  path:'test',
  component: RedComponent,
  outlet: 'header1'
},
{
  path:'test',
  component: RedComponent,
  outlet: 'header2'
},

app.component.html

<div>
Header:
  <router-outlet name="header1"></router-outlet>
</div>
<div>
Header2:
  <router-outlet name="header2"></router-outlet>
</div>
<div>
Main:
<router-outlet></router-outlet>
</div>

这将路由指定的出口,但您如何导航主要出口?

<a [routerLink]="[{ outlets: { header1: ['test'], header2: ['test'] } }]">Outlet Nav</a>

这个stackblitz很好地设置了它。如果单击Main outlet nav,您将看到主方块变为红色。您可以单击Outlet nav并更改指定的出口。你怎么能同时打开两条路线呢?

https://stackblitz.com/edit/angular-router-outlets

0 个答案:

没有答案