BehaviorSubjectでのデータ共有について、前提としてSubjectの理解もあった方が分かりやすかったため、併せて整理します。
Subjectとは
-
SubjectはObservableによる値の購読とObserverによる値を受け取り実行する、両方の機能を持つオブジェクト。 -
ObservableではObserverにユニキャストで値を送信していたが、SubjectではObserverにマルチキャストで値を送信できる。 -
SubjectではObservableにてコンシューマーに値を送信していたsubscriber関数が不要。
Observable（ユニキャスト）
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next("hoge");
subscriber.next("fuga");
subscriber.next("piyo");
});
observable.subscribe({
next: (v) => console.log(`observer1: ${v}`),
});
observable.subscribe({
next: (v) => console.log(`observer2: ${v}`),
});
// 表示 (observer1,observer2が直列で実行される)
// observer1: hoge
// observer1: fuga
// observer1: piyo
// observer2: hoge
// observer2: fuga
// observer2: piyo
Subject（マルチキャスト）
import { Subject } from 'rxjs';
const subject = new Subject<string>();
subject.subscribe({
next: (v) => console.log(`observer1: ${v}`),
});
subject.subscribe({
next: (v) => console.log(`observer2: ${v}`),
});
subject.next("hoge");
subject.next("fuga");
subject.next("piyo");
// 表示 (observer1,observer2が並列で実行される)
// observer1: hoge
// observer2: hoge
// observer1: fuga
// observer2: fuga
// observer1: piyo
// observer2: piyo
BehaviorSubjectとは
-
Subjectの機能に加え、最後に更新された値を保持することができるオブジェクト。 - コンストラクタにより初期値を設定することもできる。
- 値を保持することができるため、コンポーネント間でデータ共有も可能。
import { BehaviorSubject } from 'rxjs';
// 初期値を0で設定
const subject = new BehaviorSubject(0);
subject.subscribe({
next: (v) => console.log(`observer1: ${v}`),
});
subject.next(1);
subject.next(2);
subject.subscribe({
next: (v) => console.log(`observer2: ${v}`),
});
subject.next(3);
// 表示
// observer1: 0
// observer1: 1
// observer1: 2
// observer2: 2 ※最新の値を保持しているため、observer2は値2が送信された後でも受信できる
// observer1: 3
// observer2: 3
値を別コンポーネントで共有する場合
各ファイルの役割
- app.service.ts
- 初期値の設定
- 値の更新
- app.component.ts
- 値の購読
- app.component.html
- 値の表示
serviceのBehaviorSubjectを変更すると別コンポーネントでも値が更新されます。
app.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AppService {
// 初期値の設定
public name = new BehaviorSubject<string>("test");
constructor() { }
changeName(name: string): void {
// 値の更新
this.name.next(name);
}
}
app.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit{
public name: string = "";
constructor(private appService: AppService) {}
ngOnInit(){
// 値の購読
this.appService.name.subscribe(name => {
this.name = name;
});
}
changeName(name: string): void {
this.appService.changeName(name);
}
}
app.component.html
<!-- 値の表示 -->
<p>{{name}}</p>
<input type="text" #newName>
<button (click)="changeName(newName.value)">名前変更</button>