在保留主要路线的同时有角度导航到次要路线答案

【问题标题】：Angular Navigating to Secondary Route while Preserving Primary Route在保留主要路线的同时有角度导航到次要路线
【发布时间】：2017-07-30 02:27:01
【问题描述】：

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

我在组件类中试过这个：

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

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

我做错了什么？

最好能做这样的事情：

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

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

【问题讨论】：

标签： angular angular-routing angular-router

【解决方案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'}}]);

【讨论】：

【解决方案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 } }]);
}

【讨论】：

命令式导航仅在路由是根目录时才有效。如果路由是子路由，则指定整个路由，包括主路由到出口的部分，或者将 ActivatedRoute 作为 NavigationExtras.relativeTo 传递。
你为什么要让你的出口模式成为子路线？
这是个好问题。首先，它可能必须是因为它是延迟加载模块的一部分。其次，出口可能需要由父主路由解析的资源。
取决于您如何设计模态。无论它是否延迟加载，您都可以（并且可能应该）在全局级别设置它。如果它需要通过父路由解析资源 - 这也是一种设计选择
是的，这是一个对我的用例有益的设计决策。你的答案是正确的。我只是提供额外的信息以防其他人也需要它。