在Angular 6中,可以使用router.navigate()
方法来导航到另一个路由,并传递查询参数。下面是一个包含代码示例的解决方法:
Router
和ActivatedRoute
:import { Router, ActivatedRoute } from '@angular/router';
Router
和ActivatedRoute
:constructor(private router: Router, private route: ActivatedRoute) { }
router.navigate()
方法来导航到另一个路由,并传递查询参数:navigateToAnotherRoute() {
const queryParams = { param1: 'value1', param2: 'value2' }; // 查询参数
this.router.navigate(['/another-route'], { queryParams: queryParams });
}
ActivatedRoute
来获取传递的查询参数:import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
const param1 = params['param1'];
const param2 = params['param2'];
// 在这里使用查询参数
});
}
这样,当调用navigateToAnotherRoute()
方法并导航到/another-route
时,查询参数param1
和param2
将会传递给目标路由的组件,并可以在ngOnInit()
方法中获取和使用它们。
注意:router.navigate()
方法的第一个参数是一个数组,可以传递一个或多个路由参数。在示例中,我们使用了一个包含一个路由参数的数组,例如['/another-route']
。根据实际情况,你可以根据需要传递更多的路由参数。
上一篇:Angular 6的日期选择器
下一篇:Angular 6的声明方法类型