【问题标题】:what is 'rxjs/Subject' in Angular2? [closed]Angular2 中的 'rxjs/Subject' 是什么? [关闭]
【发布时间】:2017-03-12 13:44:33
【问题描述】:

我正在通过official cookbook 学习 Angular2。

以下代码突然出现。为什么“missionAnnounced$”没有变量声明?让 MissionAnnounced$ = ... 下面代码的逻辑是什么?

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';
@Injectable()
export class MissionService {
  // Observable string sources
  private missionAnnouncedSource = new Subject<string>();
  private missionConfirmedSource = new Subject<string>();
  // Observable string streams
  missionAnnounced$ = this.missionAnnouncedSource.asObservable();
  missionConfirmed$ = this.missionConfirmedSource.asObservable();
  // Service message commands
  announceMission(mission: string) {
    this.missionAnnouncedSource.next(mission);
  }
  confirmMission(astronaut: string) {
    this.missionConfirmedSource.next(astronaut);
  }
}

【问题讨论】:

  • 我意识到这是一个 2 岁的封闭帖子,但以防万一其他人也登陆这里:missionAnnounced$ = this.missionAnnouncedSource.asObservable(); 行实际上是(MissionService 类的)属性声明和初始化;与missionConfirmed$ 行和它上面的两条专用行相同。

标签: javascript angular rxjs


【解决方案1】:

Observable 只允许订阅,而Subject 允许发布和订阅(主题可观察的)。因此,使用Subject 可以让您的服务同时用作发布者订阅者。

@Component({})
class ComponentOne {
  constructor(private service: MissionService) {}

  onClick() {
    service.announceMission('mission started');
  }
}

@Component({})
class ComponentTwo {
  constructor(private service: MissionService) {
    service.missionAnnounced$.subscribe(mission => console.log(mission))
  }
}

@Component({})
class ComponentThree {
  constructor(private service: MissionService) {
    service.missionAnnounced$.subscribe(mission => console.log(mission))
  }
}

现在每个想要订阅任务宣布事件的人都可以订阅。 ComponentOne 将发出任务宣布事件。

为什么“missionAnnounced$”没有变量声明?

确实如此。 missionAnnounced$ 是变量名,以可观察的形式分配给 Subject。类成员变量不要使用let

以下代码的逻辑是什么?

订阅者订阅 observables($ 变量),而发布者调用 announceMissionconfirmMissionmissionAnnounced$missionConfirmed$ 的所有订阅者将分别收到这些事件。

【讨论】:

    【解决方案2】:

    为了补充之前的答案,您将在以下 SO 链接中找到充足的详细信息:What are the semantics of different RxJS subjects?

    简而言之,Rxjs 主题同时实现了ObservableObserver 接口(有关主题的不同风格和行为的更多详细信息,请参阅链接)。这里使用的标准主题充当管道,并通过其Observable 接口传递它在其Observer 接口上接收到的所有值。您在代码中看到的asObservable 函数调用隐藏了Observer 接口的实现,因此您不能在不应该使用它时无意中使用它,即您只能在使用任何常规可观察对象时使用此主题。

    【讨论】:

      猜你喜欢
      • 2017-04-21
      • 1970-01-01
      • 2018-05-12
      • 1970-01-01
      • 1970-01-01
      • 2019-11-04
      • 1970-01-01
      • 1970-01-01
      • 2016-07-14
      相关资源
      最近更新 更多