Как заранее загрузить данные компонента Angular

Question

Я хочу загрузить данные моего http запроса до того, как пользователь даже откроет этот компонент.

  this.productService.getProducts().subscribe(list => {
      console.log('List: ', list);
      this.productList = list;
    });

Причина в том, что этот запрос занимает немного длинный ответ, поэтому в результате он замедляется вниз производительность приложения. Есть ли способ загрузить эти данные заранее, не зная пользователя, чтобы при посещении компонента ему не приходилось ждать так долго.

Answer 1

Вы можете выполнить запрос при загрузке службы, а затем сохранить ответ на службе. ie:

class ProductService {

  let products: Array<Product>;

  constructor () {
    this.getProducts.subscribe((products: Array<Product>) => {
      this.products = products;
    });
  }

}

, затем в вашем компоненте просто укажите this.productService.products;

Если вы ожидаете, что запрос все еще не будет возвращен к моменту загрузки компонента, тогда вы может установить тему, которая разрешается при возврате вызова getProducts. Затем подпишитесь на это в вашем компоненте.

class ProductService {

  let products: Array<Product>;
  let productsLoaded: Subject<Array<Product>> = new Subject();

  constructor () {
    this.getProducts.subscribe((products: Array<Product>) => {
      this.products = products;
      this.productsLoaded.next(this.products);
    });
  }

}

, затем в вашем компоненте:

public ngOnInit () : void {
  this.productList = this.productService.products;
  if (!this.products) {
    this.productService.productsLoaded.subscribe((products: Array<Product>) => {
      this.productList = products;
    });
  }
}