Angular コンポーネント間でのデータ（値）の受け渡しについて

Question

###前提・実現したいこと
コンポーネント間でのデータ（値）の受け渡しで苦戦をしている初心者です。
seviceにあるものをコンポーネントにひっぱてくる手法はわかりましたが、コンポーネントの値を他のコンポーネントへserviceを用いて受けわたすにはどうしたら良いでしょうか。

ちなみに、ログイン成功時に他の画面に移って、現在のユーザーを表示したいと考えております。

###該当のソースコード

//conpornent.ts


  this.authService.logIn(body).then((response: any) => {
        // console.log(response);
        if(response.status === 200){

          console.log("true");
          let data = response.json().data;
          // console.log(data);
          // console.log(data.email);
          // console.log(data.firstName);
          // console.log(data.lastName);

          this.router.navigate(['/'])


        }
      }).catch(() => {
        this.router.navigate(['/login'])
        this.msg = 'Username or password is incorrect';
        //this.loading = false;
        console.log(this.msg)
      });
    }

//sevice.ts
  getCurrentUser(data:any){
    console.log(data);
    return data
  }

Answer 1

シングルトンなserviceにすることで、どのコンポーネントにも同じインスタンスのserviceをDIできるのでデータの受け渡しにも使えます。

Angularは階層的なDIシステムで、コンポーネントのprovidersにあれば使う、なければ親をたどります。
これを利用すると親子間のコンポーネントだけで共有といったことが可能です。

一番簡単なシングルトンにする方法は、app.module.ts等の一か所でしかprovidersを設定しないことです。大元のproviderから提供されるインスタンスを共有するため、providerがuseClassでもuseValueでも実質シングルトンな挙動になります。

公式ドキュメント：singleton-services

Comments

[sweden1]

ご返答誠にありがとうございます。
例えばなのですが、A.cnpornent.tsでlet data = 'abcd'と定義しservise.tsの方で
getData(data:any){return data}とし、B.cnpornent.tsの方でgetDataでDataの情報を取得したいのですが
どうしたら良いでしょうか。

大変初歩的な質問ですいません。

返答していただけるとさいわいです。

[shimitei]

A,Bそれぞれのコンポーネントでデータ共有したいサービスをインジェクションします。
同じインスタンスのサービスをインジェクションすることで、AでセットしたデータをBでゲットすることができます。

サンプルを作りました。
https://embed.plnkr.co/V3QbEGBzQM4ThuTkiU97/
app.tsとpage.component.tsで同じauth.service.tsをインジェクションしています。
app.tsでsetDataしたものをpage.component.tsでgetDataして表示しています。

[sweden1]

大変わかりやすいです。
おかげさまでわかりました。
ありがとうごあいます。

[sweden1]

ちなみにsetDataでデータはセトできたのですが、getdataの方がうまくいかなく、undefinedと表示されてしまいます。

他のコンポーネントではうまくいったのですが、対象のcオンポーネントではうまくいかにです。

お助けいただけると幸いです。

[shimitei]

異なるインスタンスのサービスがインジェクションされているのではないでしょうか？
別のインスタンのためsetDataされていないのでundefinedになります。

Parent and children communicate via a service
https://angular.io/guide/component-interaction#bidirectional-service
このように親のComponentだけサービスのprovidersを持ち、子には持たせないことで同じインスタンスのサービスがインジェクションされます。
親だけ、もしくはNgModuleのprovidersにだけ設定してください。

[sweden1]

親から子へうまくデータがセットできているのですが.
getDataでうまくreturnできないですね。
原因は何でしょうか

[shimitei]

何をもってデータがセットできていると確認できたのか
getDataでreturnできないと判断されたのか
それだけでは私には原因はわかりません。

Errorが出ているのでしょうか？まだundefinedが返るのでしょうか？
とりあえずサービスのコンストラクタでログ出力を行うことで、サービスがシングルトンになっているか確認できるでしょう。ログ出力が１回のみならばシングルトンでしょうし、２回以上出るならシングルトンになっていません。