質問編集履歴

1 質問の補足

ts.tubasa

ts.tubasa score 123

2017/05/09 06:42  投稿

Angular コンポーネント間のデータのやり取りについて
Angular 4.1.0を次のプロジェクトで利用しようとして、現在、勉強を行っております。
画面遷移をコンポーネントの切替で実装しようと考えております。
各コンポーネント切替時に、APIサーバーにPOSTし入力内容に応じたデータを取得しようと考えております。
各コンポーネント間のデータの受け渡しについて質問させてください。
まだ、実装をしていないのですが、Serviceを作成して、そこにデータを入れて
各コンポーネントでデータの受け渡しを考えておりますが、
考え方としてはあっておりますでしょうか?
大変、お手数をおかけしますが、ご教授、よろしくお願い致します。
```
入力画面1
└ 画面遷移時に入力チェック
  ajaxでサーバー上のデータをチェックし、取得した情報を入力画面2に表示
入力画面2
└ 画面遷移時に入力チェック
  ajaxでサーバー上のデータをチェックし、取得した情報を入力画面3に表示
入力画面3
└ 画面遷移時に入力チェック
  ajaxでサーバー上のデータをチェックし、取得した情報を入力画面1〜3すべての情報を確認画面に表示
確認画面
└ 画面遷移時にサーバーへデータ登録
 (
登録完了
```
```
---
ご回答ありがとうございます。
コンポーネントでのデータの引き継ぎを行っているのですが、下記のInputComponentから、
``` typescript
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を利用し、
```typescript
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 = "";
}
```
このコンポーネントに受け渡しをしたいと考えております。
```typescript
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でログを表示しつつ試してみたのですが、検討がついておりません。
大変、お手数をおかけしますが、ご教授、宜しくお願い致します。
  • Angular2

    229 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る