0

我有两个组件：

  1. Home 组件 2) Detail 组件

    在 Home 组件 HTML 中，我有两个输入字段：

    1. 报价 2) 报价版本

  2. 填写两个字段值，比如说 offerId100 和 version1 并提交表单。

  3. 在同一个 Home 组件 TS 文件中，我正在调用后端 http 调用并更新 SharedService 中的数据，并路由到 Detail 组件。

  4. 在 Detail 组件 ts 中，我从共享服务订阅数据并渲染到它的 HTML。

现在这个细节组件 html 有一个超链接，它调用 TS 方法，传递两个相同的参数，不同的值 offerId101 和 version2。在这种方法中，我正在调用后端服务并获取数据。现在我想在相同的 html 中呈现这些数据。
我将如何做到这一点？

我的代码是：

Detail.html



 <a href="#" (click)='searchProductsForID(currentOfferVersion?.id, previousOfferVersionID)'
                            >{{ previousOfferVersionID }}</a>

DetailComponent.ts：

searchProductsForID(ioID: string | undefined, iovID: string | undefined) {
    this.showPrevious = true;
    let iov = iovID;
    if(iov && iov.length > 0) {
      this.initQueryParams[QUERY_PARAM_KEY_IOV] = iovID;
    } else {
      this.initQueryParams[QUERY_PARAM_KEY_SHOW_CANCELLED] = true;
    }
    this.fetchProduct(WEB_SERVICE_URL + ioID, '/searchDetail');
  }
  fetchProduct(url: string, route: string) {
    this.httpService.fetchData(url, this.initQueryParams, this.headers)
      .subscribe((data) => {
        console.log(data);
        if(data.body) {
          let productsObj: Products = JSON.parse(JSON.stringify(data.body));
          this.productList = productsObj.product;
          this.productDataService.updateData(this.productList);
         // this.router.navigate([route]);
        }
      }, (error) => {
        console.log(error);
        this.productDataService.updateError(error);
       // this.router.navigate([route]);
      });
  }

正在发生的事情是：
它正在导航到 HomeComponent html，而不是使用新数据 (productList) 重新加载相同的 html。无论我是否将它路由到同一个组件，它都会转到 HomeComponent Screen。

我希望我的细节足以理解这个场景。请帮忙。

4

0 回答 0