Как сделать один вызов API из 2 разных компонентов? (Angular) - PullRequest
Новая
       25

Как сделать один вызов API из 2 разных компонентов? (Angular)

0 голосов
/ 18 апреля 2019

Как сделать один запрос к API из 2 разных компонентов. Я приложил код (HTML, машинопись и сервисы для этих двух компонентов). Как я могу сделать один вызов API из этих компонентов? Для этого я использовал rxjs и создал 2 разных сервиса. Буду признателен за любую помощь.

ПЕРВЫЙ КОМПОНЕНТ 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AgreementsService {

  constructor(private http:HttpClient) { }

 // Uses http.get() to load data from a single API endpoint
 getBodyService(): Observable<any> {
  return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}
import { Component, OnInit } from '@angular/core';
import {AgreementsService} from './agreements.service';

@Component({
  selector: 'app-agreements',
  templateUrl: './agreements.component.html',
  styleUrls: ['./agreements.component.sass']
})
export class AgreementsComponent implements OnInit {

  public body;

  constructor(private _agreementsService: AgreementsService) { }

  ngOnInit() {
    this.getBody();
  }

  getBody() {
      return this._agreementsService.getBodyService().subscribe(
          data => { this.body = data, console.log(data)},
          err => console.error(err),
          () => console.log('done loading foods')
        )
      }
}
<ul>
  <li *ngFor="let b of body">{{b.body}}</li>
</ul>

ВТОРОЙ КОМПОНЕНТ 

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class HeroService {
  constructor(private http:HttpClient) { }

  getTitleService() : Observable<any>{
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
    }
}
import { Component, OnInit } from '@angular/core';
import {HeroService} from './hero.service';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.sass']
})
export class HeroComponent implements OnInit {
  public titles;

  constructor(private _heroService: HeroService) { }

  ngOnInit() {
    this.getTitle();
  }

  getTitle() {
      return this._heroService.getTitleService().subscribe(
          data => { this.titles = data, console.log(data)},
          err => console.error(err),
          () => console.log('done loading foods')
        )
      }
}
<ul>
  <li *ngFor="let title of titles">{{titles.title}}</li>
</ul>

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Прежде всего вам необходимо понять характеристики / преимущества использования Сервиса в Angular

(i) Это синглтон, что означает, что он создается только ОДИН РАЗ.

(ii) Он также является инъекционным, что означает, что его можно использовать во всем приложении.

Службы используются для обмена данными, обмена данными между компонентами и внешними источниками данных

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

0 голосов
/ 18 апреля 2019

Вместо двух сервисов, просто используйте один. Если вы хотите уменьшить количество вызовов API, вы можете сохранить локальную копию ответа API и вернуть ее, когда данные нужны другим компонентам.

...