親子関係のコンポーネントでのデータのやりとりなら@Output,@Inputでいいですが、親子関係じゃない場合(遠い親子関係、横の関係)のパターン
Serviceを使ってデータのやりとりをし、イベントを起こさせるところまでやってみます
Observable,Subjectに関しては正直まだあまりよくわかっていないので後日しっかり学ぶ予定…
流れだけメモとして残しておく
前提
下記のようなコンポーネント構成でdataでイベントを発生させ、formでイベントを受け取って処理を行います
- fuga
- data
- form
実装
- service/message-event.service.ts
import {Injectable} from "@angular/core"; import {Observable, Subject} from "rxjs"; @Injectable() export class MessageEventService { private subject = new Subject<any>(); constructor() {} sendEvent(event: any){ this.subject.next({ name: event.name}) } getEvent(): Observable<any> { return this.subject.asObservable(); } }
サービスの準備をします
subjectというメンバを用意しそれを使ってメッセージの受け取り、取り出し部分のメソッドを用意します
- components/fuga/data.comopnent.ts
import { Component } from '@angular/core'; import {MessageEventService} from "../../../service/message-event.service"; @Component({ selector: 'app-data', template: ` <div>DataComponent</div> <button class="btn btn-primary" (click)="sendService('hoge!!!')"> Send Hoge Message! </button> <button class="btn btn-primary" (click)="sendService('fuga!!!')"> Send Fuga Message! </button> `, }) export class FugaDataComponent { constructor( private messageEventService: MessageEventService ) { } sendService(name: string) { this.messageEventService.sendEvent({name: name}) } }
data側の実装をします
MessageEventserviceをDIして使用できるようにします
sendEvent
メソッドでボタンクリック時に特定の値ををサービスに渡すようにします
- components/fuga/form.component.ts
import { Component } from '@angular/core'; import {MessageEventService} from "../../../service/message-event.service"; @Component({ selector: 'app-form', template: ` <div>FormComponent</div> <alert type="info"> {{message}} </alert> `, }) export class FugaFormComponent { private message: string; constructor( private messageEventService: MessageEventService ) { this.messageEventService.getEvent().subscribe(event => { this.message = event.name; }); } }
form側の実装をします
MessageEventserviceをDIして使用できるようにします
getEvent
でObservableなデータを取れるのでsubscribeしてデータを受け取れるようにします
受け取ったデータをthis.message
へ格納してアラートで表示させる
- components/fuga/fuga.component.html
<div class="row"> <app-data> </app-data> </div> <div class="row"> <app-form> </app-form> </div>
最後に各コンポーネントを呼び出す箇所
動作
無事動かすことができました
メッセージを受け取った段階で受け取り側のコンポーネントで何か処理をすることができるので色々活用できそうです
離れてしまったコンポーネント間のやりとりだったりに適用したりするといいのではないかと思いました