Question

点击所需的按钮后，我无法在我的网址中看到queryparams

这是我的代码

html文件

<div class="row justify-content-center">

<div class="col-md-5 ">
<div class="list-group">
  <a class="list-group-item " [routerLink]="['/product']" 
  [queryParams]="{category:Bread}"
  >Bread</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:Dairy}"
  >Dairy</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:Fruits}"
  >Fruits</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:SeasoningsandSpices}"
  >Seasonings and Spices</a>

  <a class="list-group-item " [routerLink]="['/product']"
  [queryParams]="{category:Vegetbales}"
  >Vegetables</a>

</div>
</div>
</div>

我仅重定向到具有“ / product”路由链接的页面但没有在URL上看到queryparams，如果有queryparams，又如何检索它？这是ss

https://ibb.co/DR0p9gz

Answer 1

但在网址上看不到queryparams

您将queryParam的值作为静态值传递，因此需要将其包装在这样的引号中-

<a class="list-group-item " [routerLink]="['/product']" 
  [queryParams]="{category:'Bread'}"
  >Bread</a>

如果有queryparams，如何检索它

要在组件中获取查询参数，请在构造函数中使用如下代码-

    constructor(private route: ActivatedRoute){
      this.route.queryParams.subscribe(params => {
         // get params here with key name
      });
    }

Answer 2

使用ActivatedRoute从URL获取参数

private route: ActivatedRoute
this.route.queryParams.subscribe(params => {
         // get params
      });

从角度检索URL中的queryparams

2 个答案: