如何在主路由器插座中使用命名路由器插座？答案

【问题标题】：How to use a named router-outlet inside a primary router-outlet?如何在主路由器插座中使用命名路由器插座？
【发布时间】：2020-01-13 14:45:25
【问题描述】：

我有一个主路由器插座（在我的侧导航组件内），我在这个内部创建了另外两个路由器插座。

我得到了类似的东西。

   router-outlet (primary) {

       router-outlet name='info' { }

       router-outlet name='services' {

          the path I want to navigate only inside this outlet

       }
    }

我认为这里有问题：

<button [routerLink]="[{ outlets: { primary: { services: ['view'] }}}]"> Go to services view</button>

我在 stackblitz 上编写了一个简单的版本

https://stackblitz.com/edit/router-outlet-doubt

我希望导航到查看服务组件，有人可以帮助我吗？

【问题讨论】：

标签： angular angular-routing

【解决方案1】：

空主段内的次子插座不匹配

这是一个已知问题，尚未修复。您可以在github 上查看一个未解决的问题。

您可以在stackblitz 上查看解决方法

我重写了你的代码，现在它可以工作了。在这里查看stackblitz

到目前为止我所做的改变。

我将空父级更改为一个名为 app 的路由器，它引用 BudgetsComponent，因为它是解决问题的方法。
改变视图routerLink如下

<button [routerLink]="[{outlets: {services: ['view']}}]"> Go to services view</button>

其中 services 是 outlet 名称，view 是路由路径。

【讨论】：