質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • TypeScript

    345questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • Angular2

    174questions

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,740

sweden1

score 49

前提・実現したいこと

コンポーネント間でのデータ(値)の受け渡しで苦戦をしている初心者です。
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
  }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/07 15:47

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

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

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

    キャンセル

  • 2017/09/07 16:34

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

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

    キャンセル

  • 2017/09/07 17:24

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

    キャンセル

  • 2017/09/08 11:25

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

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

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

    キャンセル

  • 2017/09/08 11:42

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

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

    キャンセル

  • 2017/09/08 13:09

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

    キャンセル

  • 2017/09/08 14:17

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • TypeScript

    345questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • Angular2

    174questions