Question

如何从2个不同的组件向API发出一个请求。我附上了代码（这两个组件的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>

Answer 1

首先，您需要了解在Angular中使用Service的特性/优点

（i）这是一个单例，意味着仅一次实例化。

（ii）它也是可注射的，这意味着它可以在整个应用程序中使用。

服务用于共享数据，组件与外部数据源之间的通信

在这种情况下，您在两个不同的服务中将相同的代码重复两次。我建议您在两个组件中注入相同的服务并使用它。

Answer 2

仅使用一项，而不是两项服务。如果要减少API调用的次数，可以存储API响应的本地副本，并在其他组件需要数据时将其返回。

如何从2个不同的组件对API进行一次调用？（角度）

2 个答案: