Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Aungular memo

Q:Angularにおけるアプリアーキテクチャ(MVC/MVP/... と言われている類)の知見や ベストプラクティスについて、ご存知でしたらご教示いただきたいです。

特に https://angular.io/guide/architecture の例で「Injector」としてひとまとめにされている 「Service」群のさらなる細分化手法や、Component-Service間でのデータの受け渡しノウハウ(同期/非同期)についてご教示いただければと思います。

A:サービスを分ける方針はAPIアクセスがあるかないかで分けます。APIアクセスがないものは

・APIサービスをまとめたもの ・API無しの業務ロジックを記載するもの(データをセッション中のみ共有するなど)

に分けられます。 これ以外に細かい部品を作る場合はHelperクラスを作って実装してます(@Injectableを使わない)。 一般的にはstaticメソッドの集まり、staticプロパティの集まりです。

Q:モジュール間やコンポーネント間でデータの受け渡しをする場合の知見についてお尋ねしたいです。 特に以下のパターンで具体的にどのように実装するのか、また、複数やり方があるのであれば それぞれメリット・デメリットについてご教示いただければと思います。

・親→子|子→親コンポーネントへのデータ受け渡し ・親→孫|孫→親コンポーネント(飛ばし)のデータ受け渡し ・画面遷移時の前後コンポーネント間のデータ受け渡し ・異なるモジュール間でのデータ受け渡し


A:一般的な話として

親→子|子→親コンポーネントへのデータ受け渡し 親から子へはデータを送れます(@Input)が子から親へは送れません。送れるのはイベントのみです(@Output)

親→孫|孫→親コンポーネント(飛ばし)のデータ受け渡し この場合は、親→子→孫 としデータを孫に送ります。イベントも孫→子→親となり間飛ばしはできません。

画面遷移時の前後コンポーネント間のデータ受け渡し Router のパラメータを使うことでデータを送ることが可能なのと、通常はサービス(@Injectable)を使ってデータ共有します

異なるモジュール間でのデータ受け渡し 一般的にはできませんが、RxJSのObservableを使って実装します Angularは様々なやり方というのはあまりなく、メリットデメリットというのはほとんど存在しません。 一つあるのがRxJSのObservableを使う方法はどこでも(いずれのパターンでも)利用できますが、 Angular管理外になるのでコーダー自身で安全なコードであるかどうかを判断する必要があります

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment