Angular 中的 .subscribe 是什么？

Question

我正在浏览 angular-tour-of-heroes 应用程序，我在路由中遇到了 .subscribe 方法。有人能解释一下这里发生了什么吗？

应用链接：https://embed.plnkr.co/?show=preview

在 hero-detail.component.ts 文件中，

ngOnInit(): void {
  this.route.paramMap
    .switchMap((params: ParamMap) => this.heroService.getHero(+params.get('id')))
    .subscribe(hero => this.hero = hero);
}

Answer 1

.subscribe 不是 Angular2 的东西。

这是一个来自 Angular 内部使用的 rxjs 库的方法。

如果您可以想象自己订阅了一份时事通讯，那么每次有新时事通讯时，他们都会将其发送到您家（调用 subscribe 内部的方法）。

当您订阅杂志源（在rxjs 库中称为Observable）时会发生这种情况

Angular 中的所有AJAX 调用都在内部使用rxjs，为了使用它们中的任何一个，您必须使用方法名称，例如get，然后对其调用订阅，因为@ 987654329@ 返回和Observable。

此外，在编写此代码 <button (click)="doSomething()"> 时，Angular 在内部使用 Observables 并为您订阅该事件源，在本例中为 click 事件。

回到我们对Observables 和newsletter stores 的类比，在您订阅后，只要有新杂志，他们就会发送给您除非您去@ 987654336@ 来自他们，您必须记住订阅号或 ID，在 rxjs 的情况下，它会是这样的：

 let subscription = magazineStore.getMagazines().subscribe(
   (newMagazine)=>{

         console.log('newMagazine',newMagazine);

    }); 

当你不想再买杂志时：

   subscription.unsubscribe();

同样，

 this.route.paramMap

它返回一个Observable，然后你订阅它。

我个人的看法是 rxjs 是 JavaScript 世界中最伟大的东西之一，它在 Angular 中甚至更好。

有 150~rxjs 方法（与lodash 方法非常相似），您使用的方法称为switchMap

Answer 2

在 Angular 中（目前在 Angular-6 上）.subscribe() 是 Observable 类型的一个方法。 Observable 类型是一种实用程序，可将数据异步或同步地流式传输到已订阅 observable 的各种组件或服务。

observable 是 Promise 链上的一个实现/抽象，将成为 ES7 的一部分，作为一个被提议且非常受支持的特性。在 Angular 中，由于 rxjs 是开发依赖项，因此在内部使用它。

一个 observable 本身可以被认为是来自一个源的数据流，在 Angular 中，这个源是一个 API 端点、一个服务、一个数据库或另一个 observable。但它的强大之处在于它不期待一个单一的回应。它可以返回一个或多个值。

在此处链接到 rxjs 以获取可观察/订阅文档：https://rxjs-dev.firebaseapp.com/api/index/class/Observable#subscribe-

Subscribe 接受 3 个方法作为参数，每个方法都是函数：

• next：对 observable 发出的每个项目执行此功能
• 错误：如果在流中某处发现错误，请执行此方法
• 完成：从流中完成所有项目后，执行此方法

在其中的每一个中，都有可能将其他称为运算符的实用程序通过管道（或链接）到结果上，以更改形式或执行一些分层逻辑。

在上面的简单示例中：

.subscribe(hero => this.hero = hero); 基本上说在这个 observable 上，将发射的英雄设置为this.hero。

根据文档和我的理解添加此答案以向 Observables 提供更多上下文。

Answer 3

Subscription 是一个代表一次性资源的对象，通常是 Observable 的执行。订阅有一个重要的方法，取消订阅，它不接受任何参数，只是释放订阅持有的资源。

import { interval } from 'rxjs';

const observable = interval(1000);
const subscription = observable.subscribe(a=> console.log(a));

/** This cancels the ongoing Observable execution which
was started by calling subscribe with an Observer.*/

subscription.unsubscribe();

Subscription 本质上只有一个 unsubscribe() 函数来释放资源或取消 Observable 执行。

import { interval } from 'rxjs';

const observable1 = interval(400);
const observable2 = interval(300);

const subscription = observable1.subscribe(x => console.log('first: ' + x));
const childSubscription = observable2.subscribe(x => console.log('second: ' + x));

subscription.add(childSubscription);

setTimeout(() => {
// It unsubscribes BOTH subscription and childSubscription
subscription.unsubscribe();
}, 1000);

根据官方文档，Angular 应该为您退订，但显然存在一个错误。

Answer 4

subscribe() - 调用 Observable 的执行并注册 Observer 处理程序以获取它将发出的通知。 -Observable- 在任意时间内表示任意一组值。