Q&A：observable and Subject

概念区别和常见的错误理解辩证：

通俗理解一下

1. Observable 是一条 "水管蓝图" ,每次打开水龙头，水流会按照设计好的路线流向终点。起点和终点一一对应。每次打开水流，都是新的流，水流之间互不影响。一次一管。

2. subject 也是一个水流蓝图，但是只是被设计了一部分，如果有人想用水，把自己家水管接上去，就有水了。 换句话说，起点和重点是一对多关系。

正式一点的理解

Subject继承了Observable类别，并且给予了更多不同的特性，因此我们会说Subject也是另外一种Observable。但是Subject和 Observable有两个明显的不同：

• observable在建立对象的同时，就决定好数据的流向了。但是subject是在产生对象之后才决定数据的流向。
• observable的每个订阅者都会得到独立的数据流，称之为单播（unicast）；subject则是每次事件发生之时候，同步传递给所有的订阅者，又称之为多播（multicast）

常见的错误理解

1. 对于subject来说，并非先收集所有的 callbackFunction 再去执行数据流的推送。而是遵循 先来后到，过时不候 这样的原则 。当作水管来理解也很合适：

订阅者1和2，3都是可以收到原始数据流的，但是在中途加入了新的数据流，现在只有订阅者3不仅可以收到原始数据流，也可以收到新的数据流。

2024/6/11 

最简单的理解：

1. 创建数据源

2. 规定数据源发出值后做什么事情

3. 在某处发值

当然可以。我们可以将 Subject 定义为组件类的一个属性，并在构造函数中完成它的初始化和事件监听的设置。这里是更简洁的实现方式：

import { Component } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-button-click',
  template: `
    <button (click)="handleClick()">Click me</button>
  `
})
export class ButtonClickComponent {
  // 定义一个Subject属性
  private clickSubject = new Subject<void>();

  constructor() {
    // 订阅Subject，以便在按钮点击时执行操作
    this.clickSubject.subscribe(() => {
      console.log('fuck');
    });

    // 这里可以添加更多的初始化代码
  }

  handleClick() {
    // 点击时调用Subject的next方法来发出一个值
    this.clickSubject.next();
  }
}

在这个例子中，clickSubject 是组件的一个属性，在组件类被实例化时就已经创建。构造函数中订阅了 clickSubject，并定义了当按钮被点击时要执行的操作。handleClick 方法在按钮点击时被调用，它简单地发出一个值到 clickSubject。

这种方法的好处是代码更加简洁，并且 clickSubject 的订阅逻辑和点击处理逻辑都集中在组件类中，易于管理和维护。此外，由于我们不需要在组件类外部访问 clickSubject，因此可以将其定义为私有属性。