Angular 路由器使用未路由的网点导航答案

【问题标题】：Angular router navigate with outlets not routingAngular 路由器使用未路由的网点导航
【发布时间】：2021-06-22 10:10:40
【问题描述】：

我正在使用 Angular 6。我有 2 个路由器插座，一个主插座和一个命名插座。对于导航到路线，我需要从组件而不是模板导航。如果我忽略了可以使用典型路由器调用的出口。导航主要加载没有问题：

this.router.navigate(['sp/auth', { "myid": obj.code }]);

但如果我尝试这样定义出口，我只会被重定向到不匹配的路线。

this.router.navigate([{
            outlets: {
                primary: ['sp/auth', obj.code ]
            }
        }]);

最终我会在这个调用中添加第二个命名的插座，但我不能让它只与主插座一起工作。我尝试使用 /（绝对值）作为前缀，但这只是在查看路由器跟踪时对 url 进行了编码。

这是路线

{path: 'sp/auth/:spID', component:SpAuthComponent},

插座适用于使用 routerLink 的其他页面。只是在组件中使用 router.navigate 时找不到路由。我一定是错过了什么。

【问题讨论】：

我怀疑你可以试试这个：this.router.navigate(['/', { outlets: { primary: ['sp/auth', obj.code ] } }]); （注意 '/' 作为数组的第一个参数）

【解决方案1】：

在@maxime1992 之后，我添加了绝对前缀，但它仍然不起作用。我需要做的是替换路线中的斜杠（在路线跟踪器中，它们是 uri 编码的，这看起来很奇怪）。
因此，如果我添加斜杠前缀并将路由名称从 sp/auth 更改为 sauth 它工作正常，还可以从辅助视图路由中删除任何斜杠。

【讨论】：