【Angular】component間でプロパティを渡す方法を紹介

フレームワーク

こんにちは。KATUOです。先週ですが、バイト先の業務にてangularのcomponent間のプロパティの共有の仕方がわからずにハマりました。Twitterでもなにやら呟いてますね。

 

 

というわけで、今回はangularにて親と子関係のcomponent間で値の受け渡しを行う方法について解説していきたいと思います。

 

serviceを経由して受け渡しをする

component間で値を共有するために3つのファイルを用意します。

 

1つ目:DataService

2つ目:ParentComponent

3つ目:ChildComponent

 

ParentComponent, ChildComponentのデータのやりとりをserviceを経由させて行います。それでは各ファイルのコードをみていきましょう。

 

Serviceでoveservableを用いる

component間で値を共有するために今回は3つのファイルを用意します。その中からはじめにcomponent間でのデータの中継箇所、serviceを見てみましょう。

 

1つ目:serviceクラス

 

import { Subject } from ‘rxjs/Subject’;

をみてわかる通り、rxjsを使っていますね。その後importしたSubjectを用いて、

 

new Subject<string>();

 

でインスタンス化しています。SubjectはObservableとObserverのどちらとしても使えるオブジェクトです。つまり、Observerとして使えるということはnextメソッドを使用することも可能です。よってこのようにnextメソッドを呼び出すことができます。

 

this.toParentData.next(msg);

 

nextメソッドは引数に与えれば、Subjectに登録しておいた複数のObserverにキャストすることができます。なんどもしつこいかもしれませんがObserverは、Observableをsubscribe(購読)し、受け取ったデータを処理する機能を持ちます。ちなみに今回のObservableはdataService.toParentDataですね。2つ目のプログラムにsubcsribeをしてる部分があります。

 

this.dataService.toParentData.subscribe( msg => { this.msg = msg; });

 

このsubscribeの内部に、Observerのオブジェクトが生成されます。

 

component間でデータをやりとりさせるメソッド

コードをみてわかると思いますが、sendMsgToParent, sendMsgToParentでお互いのプロパティを送りあうことができます。

 

 

親componentのソース

では今回親となるcomponentのソースをみてみましょう。

 

2つ目:ParentComponent クラス

 

DI(deta injection)を行う

親componentでは

 

providers: [ DataService ]

 

とprovidersでDataServiceをDIしています。DIとは?に関してはqiitaの記事でいい感じにまとめられていました。

Angular2のDIを知る - Qiita
どうも、@laco0416です。本アドベントカレンダーでは3回目の投稿です。 # Angular2のDIを知る 今回の目標は「Angular2のDIを知る」ということで、まずは基本的なところからおさらいしていきます。 ## An...

 

またserviceのDIに関しては親componentでのみ行います。理由は親と子で同一のインスタンスを持つ必要があるからです。それぞれで呼び出した場合は異なるインスタンスを保有することになってしまうで、親のみで呼び出しています。

ちなみにデータを子componentに送る場合はserviceのメソッドを呼び出していますね。

 

sendMessage() { this.dataService.sendMsgToChild(‘Hello Child!’); }

 

子componentのソース

 

3つ目:ChildComponentクラス

 

componentが破棄されたときはunsubscribe

子componentが破棄された時に、unsubscribeするような記述がされています。

 

ngOnDestroy() { // prevent memory leak when component destroyed this.subscription.unsubscribe(); }

 

unsubscribeはストリームの流れを止める役割を果たします。このようにcomponentが破棄された時にストリームの流れを止めておかないと、画面遷移してもなおsubcribeが動き続けるという状態になってしまうため、かならずcomponentが破棄された時はunsubscribeを行います。

 

implementsの意味わかってる?

implementsはインターフェイスを実装する時に用いるキーワードです。インターフェイスというのは型の定義だけされたクラスのようなものです。

 

これらのコードに対応するHTMLファイル

 

 

 

 

参考資料

Angular2でComponentをまたがったデータのやり取り - Carpe Diem
概要 Angular2でComponent間でデータをやり取りしたい状況が出てくると思います。 例えば「このボタンを押したら外部APIを叩いて状態を更新したい。その状態を他のComponentでも使っているので更新を反映したい」ときなどです。 今回はServiceにデータを保持して、それを各コンポーネントで利用するやり...

エンジニアのスキルを底上げする本を紹介

コードの可読性を高める

自分が大型ベンチャーの内定インターンに初めて参加した時、周りの超優秀なエンジニアの方々のコードをみて自分のコードの汚さに絶望しました。その時自分のマネージャーに勧められた本がリーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニックという超有名な一冊です。美しいコードを書くためのエッセンスが凝縮されています。エンジニアを職種として選ぶ方は読まない理由がない一冊です。自分もこの本を読んで、かなりコーディングスキルが向上したと感じています。

ネットワークの基礎を押さえる本

ITの基礎がおぼつかなくて、ネットワークの話についていけなかった時、早稲田大学のエンジニアの友人が勧めてくれたのがネットワークはなぜつながるのか 第2版 という本です。ハードウエアから、理論までネットワークの基礎が非常にわかりやすく解説されています。「TCP」「IP」「リゾルバ」という用語を説明できないエンジニアは間違いなく買ったほうがいいです。自分は知らなくてバカにされたので。笑

基本情報技術者試験の参考書

これからエンジニアを目指す方は受けておきたい国家試験です。IPA、独立行政法人情報処理推進機構が出題している為、大学入試のような試験ですが、それ故に資格合格の為に勉強することでITの基本をしっかり抑えることができます。

(全文PDF・単語帳アプリ付)かんたん合格 基本情報技術者教科書 2019年度

自分が合格した時の勉強方法も記事にまとめているので興味があったら読んでください。

【おすすめ参考書】当時大学2年生だった僕が、3ヵ月で基本情報受かった時の勉強方法
こんにちは。KATUOです。 今回の記事では「基本情報に合格するための勉強法」について書いていこうと思います。 基本情報技術者試験について どんな資格なの 「情...

 [番外編] 低反発座布団

会社エンジニアは座って作業することがほとんどです。1日12時間くらい座席に座っている方も多いのではないでしょう。椅子の座り心地が良けばよりプログラミングに集中できると思った僕は以下のアイテムを購入して、オフィスに設置。

IKSTAR クッション 低反発 座布団 椅子 腰楽クッション オフィス 車用 自宅用 体圧分散 座り心地抜群 プレゼント 持ち運ぶ便利 ブラック

会社の座椅子なのにまるで自分が選んで買った椅子みたいに大変身。「座り心地最高」+「姿勢が安定」腰痛にも成ることもほとんどなくなりました。なのでエンジニアのみなさんにはおすすめしています。お金に余裕のある方は買って、座ってみてください。

タイトルとURLをコピーしました