Angular 订阅可观察的vs订阅主题

在Angular应用程序中，有不同的方法从服务器获取数据：

从服务中获取可观察信息，并在组件中订阅

在服务中创建主题，并在组件中订阅主题

这两种方法对我都有效，但我不知道应该使用哪种方法

第一种方法。从服务中获取可观察信息并在组件中订阅：

第条服务条款

import { Injectable } from '@angular/core';
import { Article } from '../models/article';
import { AngularFirestore } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: "root"
})
export class ArticleService {
  public articlesChanged: Subject<Article[]> = new Subject<Article[]>();
  articles: Article[];

  constructor(private db: AngularFirestore) {}

  get() {
    return this.db.collection('articles').valueChanges({ idField: 'id' });
  }
}

import { Injectable } from '@angular/core';
import { Article } from '../models/article';
import { AngularFirestore } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: "root"
})
export class ArticleService {
  public articlesChanged: Subject<Article[]> = new Subject<Article[]>();
  articles: Article[];

  constructor(private db: AngularFirestore) {}

  get(): void {
    this.db
      .collection('articles')
      .valueChanges({ idField: 'id' }).subscribe(articles => {
        this.articles = articles as Article[];
        this.articlesChanged.next(this.articles);
      });
  }
}

第二种方法。在服务中创建主题，并在组件中订阅主题：

第条服务条款

import { Injectable } from '@angular/core';
import { Article } from '../models/article';
import { AngularFirestore } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: "root"
})
export class ArticleService {
  public articlesChanged: Subject<Article[]> = new Subject<Article[]>();
  articles: Article[];

  constructor(private db: AngularFirestore) {}

  get() {
    return this.db.collection('articles').valueChanges({ idField: 'id' });
  }
}

import { Injectable } from '@angular/core';
import { Article } from '../models/article';
import { AngularFirestore } from '@angular/fire/firestore';
import { map, take } from 'rxjs/operators';
import { Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: "root"
})
export class ArticleService {
  public articlesChanged: Subject<Article[]> = new Subject<Article[]>();
  articles: Article[];

  constructor(private db: AngularFirestore) {}

  get(): void {
    this.db
      .collection('articles')
      .valueChanges({ idField: 'id' }).subscribe(articles => {
        this.articles = articles as Article[];
        this.articlesChanged.next(this.articles);
      });
  }
}

是否有我应该使用的最佳实践

我们可以说，主语是一种特殊类型的可观察的

可观察的：订阅以获取值

主题：相同，但您也可以控制要发射到其中的值（可以订阅，但也可以发射），您将获得默认值

为了理解主体和可观察对象之间的区别，您需要了解两个不同的概念

• 数据生产者
• 数据消费者

根据定义，可观察到的是数据生产者。也就是说，这是一种可以随时间产生数据的特殊类型

另一方面，主题可以同时充当–数据生产者和数据消费者

这意味着两件事

一个主题可以订阅，就像一个可观察的

受试者也可以订阅其他可观测数据

这就是说，主体和可观察对象之间有一个主要区别

一个主题的所有订户共享该主题的相同执行。 i、 e.当主体生成数据时，其所有订户都将收到 同样的数据。这种行为不同于观测值，其中每个 订阅导致独立执行可观察的

---

对你来说，这可能没什么区别。 但是，我可以看到，使用subject会导致额外的处理，首先通过

valueChanges

subscription获取数据，然后将其推送到subject中，然后从subject中提取数据。这看起来没有必要

但是，请考虑另一个组件，它需要与您从db

valueChanges

subscription获得的数据相同的数据。在这种情况下，您首先从源收集数据，将其推入主题，然后订阅同一主题的多个组件都将获得数据。 然后，每个组件都可以独立地处理数据并完成自己的工作

例如，假设一个组件触发了一些更改。因此，会发生一些处理（比如在后端），数据返回到包含主题的服务。数据现在被推送到主题，因为多个组件订阅了这个主题，所以它们都得到相同的数据

正如您所看到的，这对于以松散耦合方式相互通信的组件非常有用。您可以使用这种方法创建一个松散耦合、灵活、可扩展的系统。

这可能会有所帮助