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

Question

我想在不明确说明主要路线的情况下导航到名为模态的次要路线。

我已经在组件类中试过了:

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

上面的代码似乎可以工作。但是，它会导航到 /first(foo:modal) 一瞬间，然后导航到根目录 /。

我做错了什么？

做这样的事情会很好:

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

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

Answer 1

您可以通过指定导出{ oulletName: 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'}}]);