Question

类似于this thread，我也以类似的方式实现。我的想法是要缓存一个集中的DB json数据，以便许多组件可以引用它。

但是，就我而言，我有一个http数据服务；实际上是从本地json服务器数据库中提取JSON数据，如下所示：

export class ProductDataService implements OnInit {

  constructor(private httpClientService: HttpClient) {
    this.productDataURL = environment.production ? "http://Server" : "http://localhost:3000/products";
    this.productList = this.httpClientService.get<IProduct[]>(this.productDataURL);
  }
}

此数据服务已在许多组件以及视图中的异步管道中使用。以下是众多消费者中的少数几个：

组件1：

    export class DetailsProductsComponent implements OnInit {
         constructor(private activatedRoute: ActivatedRoute, private productService: ProductDataService) {     
            this.productService.productList.subscribe(item => 
              {
                this.selectedProduct = item.find(value => value.productCode == this.productId);
              });    
          }
}

组件2：

export class ProductListComponent implements OnInit {

  _filterString: string = "";

  constructor(private productDataService: ProductDataService) {
    this._filterString = "";    
    this.productDataService.productList.subscribe(item => this.filteredProducts = this.masterProductList = item);
  }
}

正如您在上面看到的，我刚刚列出了2个正在使用数据服务完成其自身任务的组件。同样，还有其他几个组件。

请指导我以下内容：

这是进行数据访问的正确方法吗？如果没有，请指导？
我注意到，在通过UI单击导航到任何组件时，将对subscription或async管道进行调用；命中了对Json服务器数据库的调用。我可以通过json-server看到登录终端窗口。那是不是表现不佳？如何提高效率？
这样，我也试图在更新数据库时对可观察对象进行自动更新。但这是行不通的。我该怎么办？

谢谢

使用的库： “ rxjs”：“〜6.2.0”， “ @ angular / animations”：“ ^ 6.1.10”， “ @ angular / common”：“ ^ 6.1.10”， “ @ angular / compiler”：“ ^ 6.1.10”， “ @ angular / core”：“ ^ 6.1.10”， “ @ angular / forms”：“ ^ 6.1.10”， “ @ angular / http”：“ ^ 6.1.10”， “ @ angular / platform-browser”：“ ^ 6.1.10”， “ @ angular / platform-browser-dynamic”：“ ^ 6.1.10”， “ @ angular / router”：“ ^ 6.1.10”

多个可观察的订阅命中HTTP HTTP

0 个答案: