Angular 导航到次要路线，同时保留主要路线 [英] Angular Navigating to Secondary Route while Preserving Primary Route

问题描述

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

I would like to navigate to a secondary route called modal without explicitly stating the primary route.

我在组件类中试过这个:

I've tried this in the component class:

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

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

The above code seems to work. However, it navigates to /first(foo:modal) for a split second then it navigates to the root /.

我做错了什么?

做这样的事情会很好:

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

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

So that it matches any primary route.... Is this possible?

推荐答案

可以通过指定 outlet { oultletName: url}

You can set only the secondary segment by specifying the outlet { 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'}}]);

这篇关于Angular 导航到次要路线，同时保留主要路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！