Question

我遇到了一个问题，我没有找到任何文档。它是关于路由器的。我有一些看似这样的东西：

<router-outlet> <!-- Primary router-->
     <app-main> <!-- Top-level component-->
       <router-outlet name="projects"> <!-- Auxiliary router-->
         <app-projects>
           <router-outlet name="steps">
             <app-steps></steps>
           </router-outlet> 
         </app-projects>
        </router-outlet>
     </app-main>
</router-outlet>

我的路线看起来像这样：

{path: '', redirectTo: 'home', pathMatch: 'full'},
 {
   path: 'home', component: MainComponent, children:
     [
       {path: 'all', component: ProjetsComponent, outlet: 'projects' children:[
           {path: 'all', component: EtapesComponent, outlet: 'steps'}
      ]}
  ]
},

如果我想在名为“projects”的路由器插座内导航，我必须这样做：

 this.router.navigate(['/home', {outlets: {'projects': 'all'}}]);

我的问题是：如何在路由器内部导航命名步骤？我无法在任何地方找到语义。谢谢你的帮助。

Answer 1

有几种选择：

this.router.navigate(['/home', { outlets: { 'primary': ['all'], 'steps': ['somewhere'] } } ]);

所以在上面的例子中，你正在移动两个出口，主要和步骤。

您也可以使用链接执行相同操作：

<a [routerLink]="['/home', { outlets: { 'primary': ['all'], 'steps': ['somewhere'] } } ]">Link Name</a>

虽然我遇到了很多问题，但是你可能需要尝试一下才能使你的路由文件中的结构正确。我使用延迟加载，例如，你有相同的树状结构。

如果确实有问题，还有另一个选项，通过组件和来自点击事件的方法调用等：

navThere(): void {
  this.router.navigate(['/home']).then(nav => {
    this.router.navigate(['', { outlets: { primary: ['all'], 'steps': ['somewhere'] } }]);
  });
}

如何在另一条辅助路线内使用辅助路线？

1 个答案: