在Angular 6中,可以使用RouterStateSnapshot
和UrlTree
来保留查询参数。以下是一个示例解决方法:
QueryParamsGuard
的Guard。import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class QueryParamsGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean | UrlTree {
// 获取当前的查询参数
const queryParams = state.root.queryParams;
// 将查询参数添加到当前路由的url树中
const urlTree = this.router.createUrlTree([], { queryParams });
// 返回包含查询参数的新url树
return urlTree;
}
}
QueryParamsGuard
。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { QueryParamsGuard } from './query-params.guard';
const routes: Routes = [
{
path: 'example',
canActivate: [QueryParamsGuard],
children: [
// 子路由配置
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上述示例中,QueryParamsGuard
会在导航时获取当前的查询参数,并将它们添加到新的url树中。这样可以确保在导航到下一个页面时保留查询参数。
下一篇:Angular6表单验证