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