Angular 在保留主路由的同时导航到辅助路由

我想导航到一个名为modal的次要路由，而不明确说明主要路由

我在component类中尝试过这一点：

onclick(){
    this.router.navigate([{ outlets: { foo: 'modal' } }], { relativeTo: this.route });
}

上面的代码似乎有效。但是，它首先导航到

/一瞬间（foo:modal）

，然后导航到根

/

我做错了什么

这样做会很好：

<a href="#" routerLink="/*(foo:modal)">Open Modal</a>

---

这样它就可以匹配任何一条主要路线。。。。这可能吗？

您可以通过指定出口

{oultletName:url}

<a [routerLink]="[{outlets: { modal: 'edit/20']}}]">Edit</a>   
router.navigate([{outlets: { modal: 'edit/20'}}]);

编辑
导航（[{outlets:{modal:'edit/20'}}]）；

或多段：

<a [routerLink]="[{outlets: {primary: 'products', modal: 'edit/20']}}]">Edit</a> 
router.navigate([{outlets: {primary: 'products', modal: 'edit/20'}}]);

编辑
导航（[{outlets:{primary:'products'，modal:'edit/20'}}]）；

问题是导致立即重定向的achor标记上的

href=“#”

。删除它解决了问题

要导航到次要路线而不考虑主要路线，请执行以下操作：

<a routerLink="one" >Home</a>
<a routerLink="two" >Admin</a>
<a [routerLink]="[{ outlets: { foo: 'modal' } }]">open</a>
<a [routerLink]="[{ outlets: { foo: null } }]">close</a>

主页
管理
打开
关闭

如果您想强制导航：

<a (click)="open()">Open</a>
<a (click)="close()">Close</a>

open() {
    this.router.navigate([{ outlets: { foo: 'modal' } }]);
}
close() {
    this.router.navigate([{ outlets: { foo: null } }]);
}

打开
接近
开（）{
this.router.navigate（[{outlets:{foo:'modal'}}]）；
}
关闭（）{
this.router.navigate（[{outlets:{foo:null}}]）；
}

只有当路由是根目录时，强制导航才有效。如果路线是子路线，请指定整个路线，包括主路线到出口的部分，或将激活的路线作为NavigationExtras.relativeTo传递。为什么要将出口模式设为子路线？这是一个好问题。首先，可能是因为它是延迟加载模块的一部分。第二，出口可能需要由父主路由解析的资源。这取决于您如何设计模式。不管它是否是延迟加载的，您都可以（而且可能应该）在全局级别设置它。如果它需要通过父路径解决资源，这也是一个设计选择是的，这是一个对我的用例有利的设计决策。你的回答是正确的。我只是提供额外的信息，以防其他人也需要它。