我可以从URL中隐藏Angular 2辅助路由吗?



我在 Angular 2 中使用辅助导航路线(有时称为辅助路线)来管理左右侧边栏中显示的内容。这对我来说似乎是正确的方法,因为我希望侧边栏在整个站点中保持不变,但如果需要,我也希望能够从组件中更改它们的内容(通过执行辅助导航)。

例如,当用户查看文章并以编辑身份登录时,我可能希望在左侧边栏上添加一个"编辑"按钮。我可以通过在"文章详细信息组件"中执行辅助导航来做到这一点。

但是,我不希望侧边栏的路由出现在 URL 中。它将实现细节泄露给用户,并使原本简单、令人难忘的 URL 变得混乱,同时不会给用户增加任何价值。

那么,如何从 URL 中隐藏辅助路由?还是我问错了问题,而我对此的方法从根本上是错误的?

更新

这可以通过在执行辅助导航时将第二个对象传递给导航命令来实现,例如

this._router.navigate(
[{ outlets: { 'left-column': ['home'] }}],
{ skipLocationChange: true }
);

但是,这种方法有一个我尚未解决的缺陷。当主导航发生(无论如何)时,当主导航更改位置时,辅助路由将添加到 URL 中。这可能是我需要向 Angular 团队报告的问题。

改用链接,它工作正常。

<a [skipLocationChange]='true' [routerLink]="[{ outlets: { 'left-column': ['home'] }}]">Label</a>

查看 http://dynamo-t.firebaseapp.com
目前,应用处于构建阶段。

我在试图找出解决类似问题时遇到了线程。 以下是我设法对用户隐藏辅助路由的方法。 我希望这对将来偶然发现这个问题的人有所帮助。

我的背景:

我在 html 容器中有两个路由器插座。对于大多数路由,侧边栏的内容必须是包含通用信息的列表。 但是,当导航到已经包含此信息的页面时,我希望使用默认的空侧边栏。

溶液:

使用 routeconfig (routing.module.ts),并将两个出口声明为父路由的子路由。

这会导致 url 仅显示"父"路由,因此辅助路由被隐藏。

代码段:使用侧边栏进行路由

{
path: 'documents',
children: [
{
path: '',
component: SidebarWithInformation,
outlet: 'sidebar'
},
{
path: '',
component: DocumentComponent,
}
],
},

代码段 2:使用侧边栏路由

{
path: 'full-info',
children: [
{
path: '',
component: AggregatedInfoComponent,
},
{
path: '',
component: EmptySidebarComponent,
outlet: 'sidebar'
},
]
}

最新更新