1. 在组件中订阅服务，以获取service中的数据。

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my.service';

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

  public data: any;

  constructor(private myService: MyService) { }

  ngOnInit(): void {
    this.myService.getData().subscribe((response) => {
      this.data = response;
    });
  }

}

2. 在service中使用Subject或BehaviorSubject来发射数据，并通过next()方法对其进行更改。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

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

  private apiUrl = 'https://jsonplaceholder.typicode.com/todos';
  private dataSubject = new BehaviorSubject([]);

  constructor(private http: HttpClient) { }

  /** 发射数据 */
  getData() {
    this.http.get(this.apiUrl).subscribe((response) => {
      this.dataSubject.next(response);
    });

    return this.dataSubject.asObservable();
  }

  /** 更改数据 */
  updateData(data: any) {
    this.dataSubject.next(data);
  }

}

3. 在组件中订阅数据，在数据更改时更新变量。

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my.service';

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

  public data: any;

  constructor(private myService: MyService) { }

  ngOnInit(): void {
    this.myService.getData().subscribe((response) => {
      this.data = response;
    });

    this.myService.updateData('New data');
  }

}