我正在研究 Angular RxJs 模式,但我不明白 aBehaviorSubject
和 an之间的区别Observable
。
据我了解,aBehaviorSubject
是一个可以随时间变化的值(可以订阅并且订阅者可以接收更新的结果)。这似乎与Observable
.
你什么时候使用 an Observable
vs a BehaviorSubject
?BehaviorSubject
使用 a over an是否有好处,Observable
反之亦然?
我正在研究 Angular RxJs 模式,但我不明白 aBehaviorSubject
和 an之间的区别Observable
。
据我了解,aBehaviorSubject
是一个可以随时间变化的值(可以订阅并且订阅者可以接收更新的结果)。这似乎与Observable
.
你什么时候使用 an Observable
vs a BehaviorSubject
?BehaviorSubject
使用 a over an是否有好处,Observable
反之亦然?
BehaviorSubject是一种主题,主题是一种特殊的可观察对象,因此您可以像订阅任何其他可观察对象一样订阅消息。BehaviorSubject 的独特之处在于:
next()
onnext
getValue()
在任何时候,您都可以使用该方法在不可观察的代码中检索主题的最后一个值。与可观察对象相比,对象的独特特征是:
此外,您可以使用asObservable()
on 方法从行为主题中获取可观察对象BehaviorSubject
。
Observable是一个 Generic,BehaviorSubject
在技术上是 Observable 的一个子类型,因为 BehaviorSubject 是一个具有特定品质的 observable。
BehaviorSubject示例:
// Behavior Subject
// a is an initial value. if there is a subscription
// after this, it would get "a" value immediately
let bSubject = new BehaviorSubject("a");
bSubject.next("b");
bSubject.subscribe(value => {
console.log("Subscription got", value); // Subscription got b,
// ^ This would not happen
// for a generic observable
// or generic subject by default
});
bSubject.next("c"); // Subscription got c
bSubject.next("d"); // Subscription got d
带有常规主题的示例 2:
// Regular Subject
let subject = new Subject();
subject.next("b");
subject.subscribe(value => {
console.log("Subscription got", value); // Subscription wont get
// anything at this point
});
subject.next("c"); // Subscription got c
subject.next("d"); // Subscription got d
一个 observable 可以从Subject
和BehaviorSubject
using创建subject.asObservable()
。
唯一的区别是您不能将值发送到可观察的 usingnext()
方法。
在 Angular 服务中,我将BehaviorSubject
用于数据服务,因为 Angular 服务通常在组件之前初始化,并且行为主体确保使用该服务的组件接收到最后更新的数据,即使自组件订阅此数据以来没有新的更新也是如此。
一个非常非常重要的区别。由于 Observable 只是一个函数,它没有任何状态,所以对于每一个新的 Observer,它都会一次又一次地执行 observable 创建代码。这导致:
代码为每个观察者运行。如果它是一个 HTTP 调用,它会被每个观察者调用
这会导致重大错误和效率低下
BehaviorSubject (或 Subject )存储观察者详细信息,只运行一次代码并将结果提供给所有观察者。
前任:
JSBin: http: //jsbin.com/qowulet/edit ?js,console
// --- Observable ---
let randomNumGenerator1 = Rx.Observable.create(observer => {
observer.next(Math.random());
});
let observer1 = randomNumGenerator1
.subscribe(num => console.log('observer 1: '+ num));
let observer2 = randomNumGenerator1
.subscribe(num => console.log('observer 2: '+ num));
// ------ BehaviorSubject/ Subject
let randomNumGenerator2 = new Rx.BehaviorSubject(0);
randomNumGenerator2.next(Math.random());
let observer1Subject = randomNumGenerator2
.subscribe(num=> console.log('observer subject 1: '+ num));
let observer2Subject = randomNumGenerator2
.subscribe(num=> console.log('observer subject 2: '+ num));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.3/Rx.min.js"></script>
输出 :
"observer 1: 0.7184075243594013"
"observer 2: 0.41271850211336103"
"observer subject 1: 0.8034263165479893"
"observer subject 2: 0.8034263165479893"
观察 using 如何Observable.create
为每个观察者创建不同的输出,但BehaviorSubject
为所有观察者提供相同的输出。这个很重要。
总结了其他差异。
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ Observable ┃ BehaviorSubject/Subject ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Is just a function, no state ┃ Has state. Stores data in memory ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Code run for each observer ┃ Same code run ┃
┃ ┃ only once for all observers ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Creates only Observable ┃Can create and also listen Observable┃
┃ ( data producer alone ) ┃ ( data producer and consumer ) ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Usage: Simple Observable with only ┃ Usage: ┃
┃ one Obeserver. ┃ * Store data and modify frequently ┃
┃ ┃ * Multiple observers listen to data ┃
┃ ┃ * Proxy between Observable and ┃
┃ ┃ Observer ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Observable和subject都是 observable 的意思,观察者可以跟踪它们。但两者都有一些独特的特点。此外,总共有 3 种类型的主题,它们中的每一种都具有独特的特征。让我们试着去理解他们中的每一个。
您可以在stackblitz上找到实际示例。 (您需要检查控制台才能看到实际输出)
Observables
他们很冷:当他们至少有一个观察者时,代码就会被执行。
创建数据副本: Observable 为每个观察者创建数据副本。
单向: Observer 不能为 observable(origin/master) 赋值。
Subject
它们很热:即使没有观察者,代码也会被执行并且值会被广播。
共享数据:所有观察者之间共享相同的数据。
双向: Observer 可以为 observable(origin/master) 赋值。
如果正在使用主题,那么您会错过在创建观察者之前广播的所有值。所以来了重播主题
ReplaySubject
它们很热:即使没有观察者,代码也会被执行并且值会被广播。
共享数据:所有观察者之间共享相同的数据。
双向: Observer 可以为 observable(origin/master) 赋值。加
重播消息流:无论您何时订阅重播主题,您都会收到所有广播的消息。
在主题和重播主题中,您不能将初始值设置为可观察。所以这里出现了行为主题
BehaviorSubject
它们很热:即使没有观察者,代码也会被执行并且值会被广播。
共享数据:所有观察者之间共享相同的数据。
双向: Observer 可以为 observable(origin/master) 赋值。加
重播消息流:无论您何时订阅重播主题,您都会收到所有广播的消息。
您可以设置初始值:您可以使用默认值初始化 observable。
Observable 对象代表一个基于推送的集合。
Observer 和 Observable 接口为基于推送的通知提供了一种通用机制,也称为观察者设计模式。Observable 对象代表发送通知的对象(提供者);Observer 对象代表接收它们的类(观察者)。
Subject 类继承了 Observable 和 Observer,从某种意义上说,它既是观察者又是可观察者。您可以使用一个主题订阅所有观察者,然后将该主题订阅到后端数据源
var subject = new Rx.Subject();
var subscription = subject.subscribe(
function (x) { console.log('onNext: ' + x); },
function (e) { console.log('onError: ' + e.message); },
function () { console.log('onCompleted'); });
subject.onNext(1);
// => onNext: 1
subject.onNext(2);
// => onNext: 2
subject.onCompleted();
// => onCompleted
subscription.dispose();
更多关于https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md
我在示例中没有看到的一件事是,当您通过 asObservable 将 BehaviorSubject 转换为 Observable 时,它继承了在订阅时返回最后一个值的行为。
这是一个棘手的问题,因为库通常会将字段公开为可观察的(即 Angular2 中的 ActivatedRoute 中的参数),但可能在幕后使用 Subject 或 BehaviorSubject。他们使用什么会影响订阅行为。
见这里http://jsbin.com/ziquxapubo/edit?html,js,console
let A = new Rx.Subject();
let B = new Rx.BehaviorSubject(0);
A.next(1);
B.next(1);
A.asObservable().subscribe(n => console.log('A', n));
B.asObservable().subscribe(n => console.log('B', n));
A.next(2);
B.next(2);
一个observable只允许你订阅,而一个subject允许你发布和订阅。
因此,主题允许您的服务同时用作发布者和订阅者。
到目前为止,我还不是很擅长,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
是这里的局部变量。将属性添加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();
}
}
而已。
现在,在里面输入#message
的任何值都home.component.html
应该打印到{{message}}
里面app.component.html
将Observables想象成一个管道,里面有流动的水,有时水会流动,有时不会。在某些情况下,您可能实际上需要一个始终有水的管道,您可以通过创建一个始终包含水的特殊管道来做到这一点,无论它有多小,让我们将此特殊管道称为BehaviorSubject,如果您碰巧是作为您社区的供水供应商,您知道新安装的管道正常工作,您可以在晚上安然入睡。
用技术术语来说:您可能会遇到 Observable 应该始终在其中具有值的用例,也许您想随着时间的推移捕获输入文本的值,然后您可以创建 BehaviorSubject 的实例来确保这种行为,让我们说:
const firstNameChanges = new BehaviorSubject("<empty>");
// pass value changes.
firstNameChanges.next("Jon");
firstNameChanges.next("Arya");
然后,您可以使用“值”对随时间的变化进行采样。
firstNameChanges.value;
当您稍后组合 Observables 时,这会很方便,通过查看流的类型为 BehaviorSubject,您可以确保流至少触发或至少发出一次信号。
app.component.ts
behaviourService.setName("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
});
Observable 是一个泛型,
Observables 是多个值随时间推移的惰性集合。
只是一个函数,没有状态
为每个观察者运行代码
BehaviorSubject:需要初始值并将其当前值发送给新订阅者的主题。
从技术上讲,它是 Observable 的子类型,因为 BehaviorSubject 是具有特定品质的可观察对象。
有状态。将数据存储在内存中
相同的代码对所有观察者只运行一次
BehaviorSubject 的独特之处如下:
它需要一个初始值,因为它必须始终在订阅时返回一个值,即使它没有收到next()
订阅后,它返回主题的最后一个值。常规的 observable 仅在收到onnext时触发
在任何时候,您都可以使用getValue()方法在不可观察的代码中检索主题的最后一个值。
BehaviorSubject vs Observable:RxJS 有观察者和可观察者,Rxjs 提供了多个用于数据流的类,其中之一是 BehaviorSubject。
Observables:Observables 是多个值随时间推移的惰性集合。
BehaviorSubject:需要初始值并将其当前值发送给新订阅者的主题。
// 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
rxjs 中的主题本质上是一个观察者和可观察者的混合体。Observer 是我们投入值的东西,observable 是我们可以观察值的东西。
行为主体与主体相同,但也采用初始“种子”值。新订户立即获得最新价值。如果有人订阅了 Behavior 主题,它将立即收到最新的值。因此,行为主题总是有一些价值可以提供给订阅者。
行为主体最有用的事情是当我们开始发出网络请求时。想象一下,我们将一些管道内容链接到行为主体,并在管道函数或管道运算符内部,我们最终发出网络请求并获取一些数据。您最终可能希望让其他东西订阅该 observable 并立即获取已经获取的数据。使用行为主体,我们可以轻松实现这种行为。
行为主体
BehaviorSubject 建立在与我们的 ReplaySubject 相同的功能之上,主题喜欢,热,并重放先前的值。
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));