angular 路径参数和查询参数

最新推荐文章于 2024-02-21 04:30:00 发布

原创最新推荐文章于 2024-02-21 04:30:00 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angular路径参数 #angular查询参数

收录于

angular入门专栏收录该内容

20 篇文章

订阅专栏

本文详细总结了Angular中的路径参数和查询参数，包括配置、跳转方法及URL表现形式。通过实例展示了如何读取和使用这两种参数，帮助开发者更好地理解和应用。

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

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

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

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

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

1.<a [routerLink]="['/home',tablink]"></a>
2.this.router.navigate(['home',tablink])

1.<a [routerLink]="['/home']" [queryParams={name:'val1'}]></a>
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);
    });
  }

输出信息如下