angular 路径参数和查询参数

总结一下路径参数和查询参数，为了方便大家对比观察 写在一起方便对比

路径参数的配置--查询参数的配置

{ path: ':tabLink',component: HomeDetailComponent,}

{path: 'home',component: HomeContainerComponent,}

路径参数的跳转--查询参数的跳转

1.
2.this.router.navigate(['home',tablink])

1.
2.this.router.navigate(['home'],{queryParams:{name:'val1'}});

Url表现形式

http://localhost:4200/home/men

http://localhost:4200/home?product=watch

读取

    this.route.paramMap.subscribe(params => {console.log('路径参数: ', params);this.selectedTabLink = params.get('tabLink');});

    this.route.queryParamMap.subscribe(params => {console.log('查询参数', params);});

http://localhost:4200/home/men;name=test?product=watch

测试一下，手动写成上面的URL打印一下

  ngOnInit() {this.route.paramMap.subscribe(params => {console.log('路径参数: ', params);this.selectedTabLink = params.get('tabLink');});this.route.queryParamMap.subscribe(params => {console.log('查询参数', params);});}

输出信息如下

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！