可观测的 是通用的，

可观察对象是多个值随时间变化的惰性集合。

只是一个函数，没有状态

为每个观察者运行代码

BehaviorSubject: 一个需要初始值并将其当前值发送给新订阅者的主题。

在技术上是Observable的子类型，因为BehaviorSubject是一个具有特定品质的可观察对象。

有状态。在内存中存储数据

相同的代码只对所有观察者运行一次

行为主体的独特特征如下:

它需要一个初始值，因为它必须总是在订阅时返回一个值，即使它没有接收到next()

在订阅时，它返回主题的最后一个值。常规可观察对象只有在接收到onnext时才会触发

在任何时候，您都可以使用getValue()方法在不可观察的代码中检索主题的最后一个值。

行为主体vs可观察对象:RxJS有观察者和可观察对象，RxJS提供了多个用于数据流的类，其中一个是行为主体。

可观察对象:可观察对象是多个值随时间变化的惰性集合。

BehaviorSubject:一个需要初始值并将其当前值发送给新订阅者的Subject。

 // RxJS v6+
import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

//two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);

//two subscribers will get new value => output: 456, 456
subject.next(456);

//new subscriber will get latest value (456) => output: 456
subject.subscribe(console.log);

//all three subscribers will get new value => output: 789, 789, 789
subject.next(789);

// output: 123, 123, 456, 456, 456, 789, 789, 789

app.component.ts

behaviourService.setName("behaviour");

behaviour.service.ts

private name = new BehaviorSubject("");
getName = this.name.asObservable();

constructor() {}

setName(data) {
    this.name.next(data);
}

custom.component.ts

behaviourService.subscribe(response=>{
    console.log(response);    //output: behaviour
});

可观测的 是通用的，

可观察对象是多个值随时间变化的惰性集合。

只是一个函数，没有状态

为每个观察者运行代码

BehaviorSubject: 一个需要初始值并将其当前值发送给新订阅者的主题。

在技术上是Observable的子类型，因为BehaviorSubject是一个具有特定品质的可观察对象。

有状态。在内存中存储数据

相同的代码只对所有观察者运行一次

行为主体的独特特征如下:

它需要一个初始值，因为它必须总是在订阅时返回一个值，即使它没有接收到next()

在订阅时，它返回主题的最后一个值。常规可观察对象只有在接收到onnext时才会触发

在任何时候，您都可以使用getValue()方法在不可观察的代码中检索主题的最后一个值。

BehaviorSubject

BehaviorSubject构建在与我们的ReplaySubject相同的功能之上，比如，hot，并重放先前的值。

BehaviorSubject又增加了一个功能，您可以给BehaviorSubject一个初始值。让我们继续，看看这段代码

import { ReplaySubject } from 'rxjs';

const behaviorSubject = new BehaviorSubject(
  'hello initial value from BehaviorSubject'
);

behaviorSubject.subscribe(v => console.log(v));

behaviorSubject.next('hello again from BehaviorSubject');

观察

首先，我们来看看创建常规Observable的最小API。有几种方法可以创建Observable。创建Observable的方法是实例化类。其他操作符可以简化这个步骤，但我们希望将实例化步骤与不同的Observable类型进行比较

import { Observable } from 'rxjs';

const observable = new Observable(observer => {
  setTimeout(() => observer.next('hello from Observable!'), 1000);
});

observable.subscribe(v => console.log(v));

可观察对象只允许你订阅，而主题允许你同时发布和订阅。

因此，主题允许您的服务同时用作发布者和订阅者。

到目前为止，我不太擅长Observable，所以我只分享一个Subject的例子。

让我们用一个Angular CLI的例子来更好地理解。执行如下命令:

npm install -g @angular/cli

ng new angular2-subject

cd angular2-subject

ng serve

将app.component.html的内容替换为:

<div *ngIf="message">
  {{message}}
</div>

<app-home>
</app-home>

执行命令ng g c components/home生成home组件。将home.component.html的内容替换为:

<input type="text" placeholder="Enter message" #message>
<button type="button" (click)="setMessage(message)" >Send message</button>

#message是这里的局部变量。添加属性消息:string; 到app.component.ts的类。

执行命令ng g s service/message。这将在src\app\service\message.service.ts上生成一个服务。向应用程序提供此服务。

将Subject导入MessageService。也要添加一个主题。最终的代码应该是这样的:

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

@Injectable()
export class MessageService {

  public message = new Subject<string>();

  setMessage(value: string) {
    this.message.next(value); //it is publishing this value to all the subscribers that have already subscribed to this message
  }
}

现在，将这个服务注入到home.component.ts中，并将它的一个实例传递给构造函数。对app.component.ts也这样做。使用这个服务实例将#message的值传递给服务函数setMessage:

import { Component } from '@angular/core';
import { MessageService } from '../../service/message.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(public messageService:MessageService) { }

  setMessage(event) {
    console.log(event.value);
    this.messageService.setMessage(event.value);
  }
}

在app.component.ts中，向Subject订阅和取消订阅(以防止内存泄漏):

import { Component, OnDestroy } from '@angular/core';
import { MessageService } from './service/message.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  message: string;
  subscription: Subscription;

  constructor(public messageService: MessageService) { }

  ngOnInit() {
    this.subscription = this.messageService.message.subscribe(
      (message) => {
        this.message = message;
      }
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

就是这样。

现在，在home.component.html的#message中输入的任何值都将被打印到app.component.html中的{{message}}