あけましておめでとうございます。 今年もよろしくお願いいたします。 さて、皆様はどんな冬休みをお過ごしでしたでしょうか？ 自分は Angularの勉強中に理解に苦しむ大きな壁にぶち当たってました。(他でも高確率でぶち当たるのですが) それは…
@Inputと@Output
1つのコンポーネントでの処理を書くことは出来たのですが分割にして@Inputと@Outputに変換してみようと。 しかし何回サンプル書いても、本や参考サイトを見ても頭の中が「???」状態。
・コンポーネント分割した時のデータのやり取りどうなってるんだ？ ・イベント発生する処理の書き方、書く場所ってどこ？ ・serviceっておいしいの？ などなど。
どう理解しようと苦戦してる中、図に書いて整理しようと。
画面構成
わかりやすくInputとOutputがある簡単なタスク作成画面を構成。
list-component
機能：Input-componentで登録したタスクを表示する、表示中のタスクを削除する
input-component
機能：タスクを入力して登録する
issue-component
機能：上記2つのコンポーネントをまとめている
@Inputと@Outputの関係
@Input
親コンポーネント→子コンポーネント
@Output
子コンポーネント→親コンポーネント
この関係性はAngularデベロッパーズガイドで理解済。 じゃあ今の画面構成でどのコンポーネントが親で子なのか整理。
list-component → 子 input-component → 子 issue-component → 親
と、言うことは
issue-componentは
list-componentとinput-component に Input する
list-componentとinput-component は
issue-component に Output する
が成立されることがわかりました。 では、図で整理。
データの流れ
ふむふむ…うーん???
そのやり取りしてるデータ処理はどこでしてるの？
色々調べたりしていたら以下のルールがありました。
・データは親が持っている ・serviceはデータの処理をする
これらを踏まえて再度図に書き起こしてみる。
自分なりに理解したこと
・Inputで受け取ったデータ、Outputで呼び出すデータは親コンポーネントと紐付いている(という言葉が適切ではないかもしれませんが)serviceが処理 ・つまり処理を書くのはservice ・@Output と Emitteはセットで考えること
むん…まだまだ深いです@Inputと@Output。
最近気付いたこと
自分は元々グラフィックデザイナーでありコードがほとんど書けません。 ですので簡単な図に起こして整理したほうがわかりやすいと思いました。 (効率悪いかもしれませんが…) 2018年、修行はまだまだ続きます。
