notebook

都内でWEB系エンジニアやってます。

angular2でサービスを使ってデータのやりとりをする

親子関係のコンポーネントでのデータのやりとりなら@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>

最後に各コンポーネントを呼び出す箇所

動作

f:id:swfz:20170417014133g:plain

無事動かすことができました

メッセージを受け取った段階で受け取り側のコンポーネントで何か処理をすることができるので色々活用できそうです

離れてしまったコンポーネント間のやりとりだったりに適用したりするといいのではないかと思いました