如何在另一个辅助路线中使用辅助路线？

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

我的问题是：如何在 router-outlet 命名步骤中导航？我在任何地方都找不到语义。谢谢你的帮助。

Answer 1

有几种选择：

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

因此在上面的示例中，您要移动两个出口，主要出口和台阶。

您也可以对链接执行相同的操作：

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

我运行虽然有很多关于多个出口的问题，所以你可能需要做一些实验才能让它适合你在路由文件中的结构。例如，我使用的是延迟加载，尽管你有相同的 tree-like 结构。

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

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

如何在另一个辅助路线中使用辅助路线？

How to use an auxiliary route inside another auxiliary route?

angular

angular-router