Angular 在保留主要路线的同时导航到次要路线

Question

我想导航到名为 modal 的次要路线，而无需明确说明主要路线。

我已经在组件 class 中试过了：

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

以上代码似乎有效。但是，它导航到 /first(foo:modal) 一瞬间，然后导航到根 /.

我做错了什么？

做这样的事情会很好：

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

以便它匹配任何主要路由....这可能吗？

Answer 1

您可以通过指定出口只设置次要网段{ oultletName: url}

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

或多个细分：

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

Answer 2

问题出在导致立即重定向的 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 } }]);
}

Angular 在保留主要路线的同时导航到次要路线

Angular Navigating to Secondary Route while Preserving Primary Route

angular-routing

angular

angular-router