在我的Angular 2应用程序中,我有一个标签区域,用户可以从一组独立但与上下文相关的组件中进行选择 . 当他们点击其中一个链接时,相关组件会根据routerLink中定义的内容加载,如下所示:
<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>
这很好用 . 但是,从那时起,我们构建了应用程序,以便将各种用户选择的过滤器选择保存为URL中的参数 . 这样,当他们重新加载组件时,他们的最新选择仍然可见并应用于数据 . 因此,在用户进行了一些过滤器选择后,URL可能如下所示:
http://somesite.com/page1;language_filter=true;language_selection=English
这个组件代码如下所示:
public changePage(page, value, type, body)
{
this.onUserSelection(value, type, body, page);
this.route.params.subscribe(
(params: any) => {
this.page = params['page'];
this.language_filter = params['language_filter'];
this.language_selection = params['language_selection'];
}
);
this.router.navigate(
['/page1', {
page: page,
language_filter: this.language_filter,
language_selection: this.language_selection,
}]);
}
这适用于通过路由文件完成的主要导航方法,其中每个方法如下所示:
{ path: 'page1', component: Page1Component, canActivate: [AuthGuard], data: {contentId: 'page1'} }
但是,对于我提到的这个标签区域,'s loading components according to a hard-coded routerLink param. So I realize now that when a user navigates BACK to a component that way, as opposed to via one of the other ways we make available, it actually overrides the URL params - because it' s字面上加载了"page1" - 因为这个 <a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>
...因此,之前添加的URL参数已被删除 .
所以,我的问题是,有没有办法可以编辑这段代码:
<a class="page-content-header-item" routerLink="/page1" routerLinkActive="selected">Page 1</a>
...所以它允许一些动态变量?或者我是否必须找到一种新方法来处理此选项卡区域中的导航?
1 回答
这是我使用
queryParams
的解决方案 .首先,您可以使用
queryParams
指令在routerLink
指令中传递参数:其中
fooParams
是一个普通对象:Angular会输出这个url
你接下来要做的是设置拦截
ActivatedRoute
的方法,这样你就可以从ActivatedRouteSnapshot
中提取参数的值 . 您可以使用解析程序或直接在组件中执行此操作 . 在我的例子中,我使用了一个解析器:然后在路径定义中传递解析器:
然后,在
PageOneComponent
中,您可以订阅已解析的数据并使用它执行任何操作,例如,使用它设置表单的值并在表单更改时更新queryParams .有关完整示例,请查看此plunker
确保在单独的窗口中打开预览,以便在浏览器中查看路径更改 .
如果您导航到第1页,更改表单中的值,然后导航到第2页,然后在浏览器中按回,您可以看到表单中加载的值对应于网址中的参数 .