Question

这是我的路线的样子。应该注意的是，当页面加载时，所有默认/空白路由都能正常工作。

const routeConfig = [
  {
    path:'', component:HomeComponent,
    children: [
      { path:'', component:ContractsComponent },
      { path:'contracts', component:ContractsComponent },
      { path:'research', component:ResearchComponent},

      { path:'', outlet:'right-panel', component:PlanetComponent },
      { path:'wtf', outlet:'right-panel', component:WTFComponent }
    ]
   }
];

我在ContractsComponent中有一个链接，它有一个如下所示的routerLink：

[routerLink]="[{outlets: {'right-panel':['wtf']}}]"

我想让右侧面板插座显示WTFComponent。但我得到的只是一个错误，说它无法匹配任何路线。

我错过了什么？或者routerLink不能用于辅助兄弟路由吗？

Answer 1

经过多次战斗，我发现这在我的特殊情况下有效：

[routerLink]="{outlets: {'right-panel':'wtf'}}"

正在运行的程序化版本是：

this.router.navigateByUrl('home/(contracts//right-panel:wtf)');

我的routeConfig现在看起来像这样：

const routeConfig = [
  { path:'', redirectTo: 'home', pathMatch: 'full'},
  {
    path:'home', component:HomeComponent,
    children: [
      { path:'', component:ContractsComponent },
      { path:'contracts', component:ContractsComponent },
      { path:'research', component:ResearchComponent},

      { path:'', outlet:'right-panel', component:PlanetComponent },
      { path:'wtf', outlet:'right-panel', component:ContractComponent }
    ]
   }
];

Answer 2

我发现指定当前（主要）路由作为传递到[routerLink]的数组的第一部分，加上指定出口配置的options数组允许转换到同一命名出口中的兄弟路由。 / p>

e.g。使用OP的路由配置：

const routeConfig = [
  {
    path:'', component:HomeComponent,
    children: [
      { path:'', component:ContractsComponent },
      { path:'contracts', component:ContractsComponent },
      { path:'research', component:ResearchComponent},

      { path:'', outlet:'right-panel', component:PlanetComponent },
      { path:'wtf', outlet:'right-panel', component:WTFComponent }
    ]
   }
];

并假设＆＃39;右面板＆＃39; outlet目前正在显示PlanetComponent：

[routerLink]="[ '', { outlets: { 'right-panel': 'wtf' } } ]"

数组的空字符串第一个参数意味着主要路由应该保持不变，而命名出口中的兄弟路由由选项对象中的出口配置更改。

Angular 2带有routerLink的兄弟姐妹之间的辅助路由

2 个答案: