如何在主路由器插座内使用命名路由器插座？

Question

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

我得到了这样的东西。

   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

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

Answer 1

Secondary child outlet inside empty primary segment does not match

这是一个已知问题，尚未修复。您可以在 github.

查看一个未解决的问题

您检查 stackblitz

有一个解决方法

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

到目前为止我改变了什么。

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

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

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

如何在主路由器插座内使用命名路由器插座？

How to use a named router-outlet inside a primary router-outlet?

angular-routing

angular