angular - 如何在主路由器插座中使用命名路由器插座？

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

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

标签： angularangular-routing

Answer 1

空主要段内的次要子出口不匹配

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

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

我重写了你的代码，现在它可以工作了。在这里查看堆栈闪电战

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

1. 我将空父级更改为一个名为 app 的路由器，它指的BudgetsComponent是该问题的解决方法。

2. 更改视图routerLink如下

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

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