Question

我正在开发应用程序，但我有以下问题。我已经考虑过要创建一个调用所有服务的服务以集中所有调用。我的想法是，此服务具有几个公共变量，其他屏幕可以通过例如将其称为订户来从中获取数据。我希望当另一个屏幕获取此数据时，它们被同等更新，以使每个屏幕不必在后台集中调用同一服务，并且如果所调用的服务有任何更改，则该服务更新被调用服务的变量。这个有可能？还是在使用服务的方式上感到困惑？（如果不可能）...更新服务中的那些服务时如何使这些变量动态变化？如何调用服务的那些变量并使我在该屏幕中保持更新？有办法吗？谢谢！！

Answer 1

这是可能的，这是服务在Angular中正常行为。服务将根据您provide的位置创建为单例。在根级别提供服务可确保注入该服务的所有组件都将接收相同的引用，而不是新实例。这是通过将元数据传递到@Injectable装饰器中完成的。

让我们创建一个服务，在根级别提供它，然后将其注入两个组件中。每个组件将收到相同的参考。如果我们向服务添加可观察项，并且两个组件都订阅了该可观察项，则它们将接收相同的值。当该值更改时，两个组件中的值都会更新。

服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  public message$: Observable<string>;
  private message: BehaviorSubject<string>;

  constructor() {
    this.message = new BehaviorSubject('default message');
    this.message$ = this.message.asObservable();
  }

  public updateMessage(message: string): void {
    this.message.next(message);
  }
}

组件（它们几乎彼此完全相同）：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-first-component',
  template: `
    <p>first component: {{ message$ | async }}</p>
  `
})
export class MyFirstComponent implements OnInit {
  public message$: Observable<string>;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.message$ = this.myService.message$;
    this.myService.updateMessage('new message')
  }
}


@Component({
  selector: 'my-second-component',
  template: `
    <p>second component: {{ message$ | async }}</p> 
  `
})
export class MySecondComponent implements OnInit {
  public message$: Observable<string>;

  constructor(private myService: MyService) {}

  ngOnInit() {
    this.message$ = this.myService.message$;
  }
}

如果您查看两个组件的模板，那么我们正在订阅服务中的可观察对象，并显示消息。邮件默认为'default message'，由服务设置。

请注意，在第一个组件的ngOnInit中，我们更新了此行上的消息：this.myService.updateMessage('new message')。请注意，这仅在第一个组件中，而不在第二个组件中。如果您在应用程序中运行此消息，则消息将在两个组件上都更新为'new message'。这表明这是MyService的相同实例，并且可以由任意数量的组件使用和更新。

我想为整个应用程序创建一个全局服务

1 个答案: