我正在使用以下代码从调用页面传递路由参数:
showProfile(id: string) {
const navigationParam: NavigationExtras = {
queryParams: {
userId: id
}
};
console.log('navParm', navigationParam);
this.router.navigateByUrl('view-profile', navigationParam);
}
console.log显示带有数据的navigationParam。但是,视图配置文件页面上的控制台日志不是
constructor(private route: ActivatedRoute,
private router: Router) {
this.route.queryParams.subscribe(params => {
console.log('params', params);
});
}
答案 0 :(得分:2)
为此,您应该使用navigate
函数,其中issue when passing queryParams与navigateByUrl
:
this.router.navigate(['view-profile'], navigationParam);
在您的查看资料页中:
constructor( private route: ActivatedRoute,
private router: Router ) {
this.route.queryParams.subscribe(params => {
console.log(params['userId']);
});
}
}
答案 1 :(得分:0)
**parent.ts**
import { Router } from '@angular/router';
constructor( public router: Router, )
this.router.navigate(['/view-profile', { id: your params variable}]);
**view-profile.ts**
import { ActivatedRoute, } from '@angular/router';
constructor(
private route: ActivatedRoute,
) {
let data = this.route.snapshot.paramMap.get('id');
console.log(" data ", data);
}
答案 2 :(得分:0)
parent.ts
openDetailsWithState() {
let navigationExtras: NavigationExtras = {
state: { \\create state like object
user: this.user \\this.user is your array this method using pass array ,u can avoid pass data inside URL bar
}
};
this.router.navigate(['details'], navigationExtras);
}
Child.ts
data: any;
constructor(private route: ActivatedRoute, private router: Router) {
this.route.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation().extras.state) { \\Get value from state
this.data = this.router.getCurrentNavigation().extras.state.user;
}
});
}
这是最好的解决方案