仅当父组件使用Angular4返回可观察对象时，如何在子组件上调用函数 [英] How to call a function on a child component only when the parent component returns an observable using Angular4

问题描述

简而言之:发出一个HTTP请求并将该数据传递给所有组件.问题是其他组件在我从初始HTTP请求返回响应之前就已经运行.所有组件都只是从HTTP响应对象"-使用Angular 4.

非常感谢您的帮助.

基本上，我的父组件调用一个加载我的JSON的服务.在service方法中，我使用rxjs BehaviorSubject将HTTP请求的响应分配给Observable，这样我就可以访问和跟踪所有订阅它的组件.想像一下，我可以只打一个电话给服务器，而只是抓住我想要的所有组件中的部件，而不用打多个电话给服务器.也许我犯错了……很可能是这样.

我的父母组成部分:

constructor(private _service: ProductsService, private data:DataService) { 
   this.getCatgegories(this.masterProduct);
}

我的服务方法:

private productCategoriesList = new BehaviorSubject<any>([]);
currentList = this.productCategoriesList.asObservable();

changeCatList(categoriesList){
   this.productCategoriesList.next(categoriesList);
}

getCatgegories(masterProduct: number) {
  return this.http
    .get(this.url)
    .map(response => {
    let productArray = response.json()[0].products;
    let henry = this.getFields(productArray, 'product');
    this.changeCatList(henry);
    //some parsing of object to get the returned value

    return catObj;
    });
}

解决方案

第一个问题的答案是您采用正确的方法.如果您想通知所有订阅服务的组件，这是根据您的要求处理来自服务器的数据的好方法.

如果组件不是父子组件，此方法也将适用，因此适用于所有人.

如果@Input和@Output是其父级子对象并且在更改时发出并发生事件，而cat在其他组件中捕获它们，则也可以想到.但是您的方法在大量组件中效果很好.

您的方法和更正.

在您的服务中，您公开了2个可订阅的Observable.当getCatgegories(masterProduct: number)返回一个可观察对象时，您可以订阅它并获取如下数据

因此更改您的服务以检查数据是否可用，然后返回或致电该服务.

   // check if the method is called once then directly get the value from `BehavourSubject` or else call the method to get the data.
private productCategoriesList = new BehaviorSubject<any>([]);
currentList = this.productCategoriesList.asObservable();

changeCatList(categoriesList){
   this.productCategoriesList.next(categoriesList);
}

getCatgegories(masterProduct: number) {
  const availableData = undefined;
  this.currentList.subscribe((data) => {
   if(data !==[]) { availableData  = data; }
  });

  if(availableData !== undefined ) {
    return this.http
    .get(this.url)
    .map(response => {
    let productArray = response.json()[0].products;
    let henry = this.getFields(productArray, 'product');
    this.changeCatList(henry);
    //some parsing of object to get the returned value

    return catObj;
    });
    } else {
      return this.currentList;
    } 
}

解决问题的方法

constructor(private _service: ProductsService, private data:DataService) { 
   this.ProductsService.getCatgegories(this.masterProduct).subscribe(( data) => {
      // do some operation into data
   });
}

"In a nutshell: make one HTTP request and pass that data to all components. The issue is that the other components run before I get the response back from the initial HTTP request. All components are just extracting bits of data from the HTTP response object" - Using Angular 4.

Any help would be greatly appreciated, thank you.

Basically, my parent component calls a service that loads my JSON. within the service method, I assign the response from my HTTP request to an Observable using rxjs BehaviorSubject so that I can access and follow from all my components that are subscribed to it. Figured I could just make one call to my server and just grab the parts I want throughout all my components instead of making many calls to the server. Maybe I am going at this all wrong...most likely am.

MY Parent componenet:

constructor(private _service: ProductsService, private data:DataService) { 
   this.getCatgegories(this.masterProduct);
}

My Service method:

private productCategoriesList = new BehaviorSubject<any>([]);
currentList = this.productCategoriesList.asObservable();

changeCatList(categoriesList){
   this.productCategoriesList.next(categoriesList);
}

getCatgegories(masterProduct: number) {
  return this.http
    .get(this.url)
    .map(response => {
    let productArray = response.json()[0].products;
    let henry = this.getFields(productArray, 'product');
    this.changeCatList(henry);
    //some parsing of object to get the returned value

    return catObj;
    });
}

解决方案

The answer to your first question is you are in right approach. In case you want to notify all the component who ever subscribe to your service is the good way to handle data from server as per your requirement.

This approach will also work where components are not parent child, so it will work for all.

You can also think of @Input and @Output if its parent child and emit and event on change and cat catch them in other component. But your approach works good in large number of component.

your approach and correction.

In your service you are exposing 2 observable which can be subscribed. As getCatgegories(masterProduct: number) is returning an observable you can subscribe to it and get data like below

so change your service to check if data is available then return or else make a call to the service.

   // check if the method is called once then directly get the value from `BehavourSubject` or else call the method to get the data.
private productCategoriesList = new BehaviorSubject<any>([]);
currentList = this.productCategoriesList.asObservable();

changeCatList(categoriesList){
   this.productCategoriesList.next(categoriesList);
}

getCatgegories(masterProduct: number) {
  const availableData = undefined;
  this.currentList.subscribe((data) => {
   if(data !==[]) { availableData  = data; }
  });

  if(availableData !== undefined ) {
    return this.http
    .get(this.url)
    .map(response => {
    let productArray = response.json()[0].products;
    let henry = this.getFields(productArray, 'product');
    this.changeCatList(henry);
    //some parsing of object to get the returned value

    return catObj;
    });
    } else {
      return this.currentList;
    } 
}

Solution to your problem

constructor(private _service: ProductsService, private data:DataService) { 
   this.ProductsService.getCatgegories(this.masterProduct).subscribe(( data) => {
      // do some operation into data
   });
}

这篇关于仅当父组件使用Angular4返回可观察对象时，如何在子组件上调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！