Question

我正在调用组件中的服务并从routetlink传递参数

我的物品在下面

组件

ngOninit(){
let id = parseInt(this.route.snapshot.paramMap.get('id'));// value is 1
    this.getProducts(id);
}


 getProducts(id: number) {
    this.myService.getProducts(id)
      .subscribe(val => {
        this.value= val;
      }
  }

服务中

url ="..getdetails?id="

getProducts(id: number): Observable<Products> {
    this.url = `${this.Url}${id}`
    return this.http.get<Products>(this.Url);
  }

这里我使用的是url =“ .. getdetails？id =”，因为我需要在url中传递整数。 Httpurlparams方法只能发送字符串值。

这是我在网络上看到两个xhr请求的问题

"..getdetails?id=1"
"..getdetails?id=11"

我希望只有一个网络通话我参考了文档，发现可观察到的寒冷将调用两次。但就我而言，它在第二个请求后附加了错误的ID。请指导我该怎么做...

Answer 1

ngOninit()被两次调用是一个不同的问题。不同的查询字符串参数是由

引起的

this.url = `${this.Url}${id}`

这里发生的是this.url在第一次调用该服务时发生了变异。在第二次调用中，使用了this.url的此突变值，并在其后附加了1导致问题。

使用带有let关键字的块范围。

再现问题和解决方案的示例：

let url ="..getdetails?id="
let id = 1;

url = `${url}${id}`;
console.log(url);
url = `${url}${id}`;
console.log(url);

function setUrl(id) {
  console.log('Within a function...');

  let url = "..getdetails?id="

  url = `${url}${id}`;
  console.log(url);

}

setUrl(1);
setUrl(1);

查看输出：

$ node app.js
..getdetails?id=1
..getdetails?id=11
Within a function...
..getdetails?id=1
Within a function...
..getdetails?id=1

解决方案：

 setUrl(url:string, id:number) { 
  url = `${url}${id}`;
  console.log(url);
  return url;
}

getProducts(url:string, id: number): Observable<Products> {

  return this.http.get<Products>(this.setUrl(url, id));
}

传递两次整数URL参数的Angular服务被调用两次，将Param值附加到API调用

1 个答案: