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

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

ただいまの
回答率

90.35%

Angular コンポーネント間のデータのやり取りについて

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,484

ts.tubasa

score 117

Angular 4.1.0を次のプロジェクトで利用しようとして、現在、勉強を行っております。

画面遷移をコンポーネントの切替で実装しようと考えております。
各コンポーネント切替時に、APIサーバーにPOSTし入力内容に応じたデータを取得しようと考えております。

各コンポーネント間のデータの受け渡しについて質問させてください。

まだ、実装をしていないのですが、Serviceを作成して、そこにデータを入れて
各コンポーネントでデータの受け渡しを考えておりますが、
考え方としてはあっておりますでしょうか?

大変、お手数をおかけしますが、ご教授、よろしくお願い致します。

入力画面1
 └ 画面遷移時に入力チェック
   ajaxでサーバー上のデータをチェックし、取得した情報を入力画面2に表示
入力画面2
 └ 画面遷移時に入力チェック
   ajaxでサーバー上のデータをチェックし、取得した情報を入力画面3に表示
入力画面3
 └ 画面遷移時に入力チェック
   ajaxでサーバー上のデータをチェックし、取得した情報を入力画面1〜3すべての情報を確認画面に表示
確認画面
 └ 画面遷移時にサーバーへデータ登録
  (
登録完了

ご回答ありがとうございます。

コンポーネントでのデータの引き継ぎを行っているのですが、下記のInputComponentから、

import {
    Component,
    OnChanges,
    OnInit,
    DoCheck,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy
} from "@angular/core";
import { Router } from '@angular/router'
import { FormsModule } from "@angular/forms";
import { CountService } from './count.service';

@Component({
    selector: 'my-input',
    templateUrl: './input.component.html',
    providers: [CountService],
    styleUrls: ['./input.component.scss']
})
export class InputComponent {

    code: string;

    constructor(private countService: CountService, private router: Router) { }

    onUserForm(event) {
        console.log('@@@onUserForm')

        this.countService.code = this.code;
        this.router.navigate(['ident']);
    }
}

このServiceを利用し、

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { Result } from './result'

@Injectable()
export class CountService {

  /**
   * データを保持しておく
   */
  code = "";
  name = "";
}

このコンポーネントに受け渡しをしたいと考えております。

import {
    Component,
    OnChanges,
    OnInit,
    DoCheck,
    AfterContentInit,
    AfterContentChecked,
    AfterViewInit,
    AfterViewChecked,
    OnDestroy
} from "@angular/core";
import { Router } from '@angular/router'
import { CountService } from './count.service';

@Component({
    selector: 'my-ident',
    templateUrl: './ident.component.html',
    providers: [CountService],
    styleUrls: ['./ident.component.scss']
})
export class IdentComponent {

    name: string;

    constructor(private countService: CountService, private router: Router) { }

    read() {
        console.log(this.countService.code);
        return this.countService.code;
    }

    ngOnInit() {
        console.log(this.countService.code);
    }

    identCheck(event) {
        console.log(this.countService.code);
        this.countService.name = this.name;
        this.router.navigate(['number']);
    }

}

read()が呼ばれるタイミングで、serviceからデータが取得できませんでした。
consoleでログを表示しつつ試してみたのですが、検討がついておりません。

大変、お手数をおかけしますが、ご教授、宜しくお願い致します。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

私の場合だと、componentをまたぐデータのやり取りはserviceを通して行なっています

小さなプロジェクトであれば、component間でもなんとかなるかもしれませんが、
データの量やページ数が増えてくると、とてもじゃありませんが管理ができないと思います。

なので、できる限りserviceに入れといたほうが無難だと考えています!

あと、状況によりけりですけど一定期間ブラウザで保存しておけるように、localstorageを利用するのも一つの手ですね
実際にうちの会社でも使ったりしています

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • この投稿は削除されました

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

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

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