Angular 4服务调用中Subscription的作用：新手的Observable与订阅疑问

嘿，作为刚接触Angular 4的新手，能问到这个点真的很棒——Observable和Subscription确实是RxJS里最核心也最容易懵的概念之一，我来给你掰扯清楚～

先搞懂：订阅（subscribe）的核心意义 #

首先得明确：Observable本身是**“冷”的数据流**——它就像一个装着数据的水管，但你不拧开龙头（也就是不调用.subscribe()），水管里的水根本不会流出来。

说白点：

• 你调用this.service1.method1()的时候，只是创建了一个Observable的“蓝图”，并没有真正执行里面的逻辑（比如发起HTTP请求、启动定时器）。
• 只有当你调用.subscribe()之后，这个Observable才会被激活，开始发射数据，触发你写的回调函数。

两种写法的核心差异 #

案例2：直接订阅不保存Subscription #

这种写法适用于一次性的Observable，比如普通的HTTP请求——这类Observable在发射完数据（比如请求成功/失败）后，会自动完成（complete），订阅也会自动结束，不会一直占用资源。

但如果你的Observable是长期运行的（比如WebSocket连接、interval定时器、路由参数的监听），这种写法就有问题了：

• 当组件被销毁（比如用户跳转到其他页面），这个订阅不会自动取消，会一直留在内存里，导致内存泄漏——组件都没了，回调还可能被触发，甚至引发错误。

案例1：把Subscription存到变量里 #

这种写法的核心目的就是手动管理订阅的生命周期：

• 你可以在组件的ngOnDestroy钩子中，调用this.subscription.unsubscribe()，主动取消这个订阅，切断Observable和组件的关联，避免内存泄漏。
• 如果有多个订阅，还可以用this.subscription.add(另一个订阅)把它们合并到同一个Subscription对象里，销毁时一次性取消所有订阅，非常方便。

举个完整的例子：

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

export class MyComponent implements OnInit, OnDestroy {
  private subscription: Subscription;

  ngOnInit() {
    // 保存第一个订阅
    this.subscription = this.service1.method1().subscribe(
      (data) => { /* 处理成功数据 */ },
      (error) => { /* 处理错误 */ },
      () => { /* 处理完成 */ }
    );
    // 追加第二个订阅
    this.subscription.add(this.service1.method3().subscribe(() => {}));
  }

  ngOnDestroy() {
    // 组件销毁时取消所有订阅
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

额外小技巧：用AsyncPipe自动管理订阅 #

如果你在模板里需要用到Observable的数据，Angular的async管道可以帮你自动完成订阅和取消订阅，不用手动写Subscription：

<!-- 模板里用async管道 -->
<div>{{ service1.method1$ | async }}</div>

这种方式既简洁又安全，推荐在合适的场景下使用～

内容的提问来源于stack exchange，提问作者shreyansh