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

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

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

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

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

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

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

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

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

typescript
1import {
2    Component,
3    OnChanges,
4    OnInit,
5    DoCheck,
6    AfterContentInit,
7    AfterContentChecked,
8    AfterViewInit,
9    AfterViewChecked,
10    OnDestroy
11} from "@angular/core";
12import { Router } from '@angular/router'
13import { FormsModule } from "@angular/forms";
14import { CountService } from './count.service';
15
16@Component({
17    selector: 'my-input',
18    templateUrl: './input.component.html',
19    providers: [CountService],
20    styleUrls: ['./input.component.scss']
21})
22export class InputComponent {
23
24    code: string;
25
26    constructor(private countService: CountService, private router: Router) { }
27
28    onUserForm(event) {
29        console.log('@@@onUserForm')
30
31        this.countService.code = this.code;
32        this.router.navigate(['ident']);
33    }
34}

このServiceを利用し、

typescript
1import { Injectable } from '@angular/core';
2import { Http, Headers, Response, RequestOptions } from '@angular/http';
3import { Observable } from 'rxjs/Observable';
4import 'rxjs/add/operator/map';
5import 'rxjs/add/operator/catch';
6import 'rxjs/add/observable/throw';
7
8import { Result } from './result'
9
10@Injectable()
11export class CountService {
12
13  /**
14   * データを保持しておく
15   */
16  code = "";
17  name = "";
18}
19

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

typescript
1import {
2    Component,
3    OnChanges,
4    OnInit,
5    DoCheck,
6    AfterContentInit,
7    AfterContentChecked,
8    AfterViewInit,
9    AfterViewChecked,
10    OnDestroy
11} from "@angular/core";
12import { Router } from '@angular/router'
13import { CountService } from './count.service';
14
15@Component({
16    selector: 'my-ident',
17    templateUrl: './ident.component.html',
18    providers: [CountService],
19    styleUrls: ['./ident.component.scss']
20})
21export class IdentComponent {
22
23    name: string;
24
25    constructor(private countService: CountService, private router: Router) { }
26
27    read() {
28        console.log(this.countService.code);
29        return this.countService.code;
30    }
31
32    ngOnInit() {
33        console.log(this.countService.code);
34    }
35
36    identCheck(event) {
37        console.log(this.countService.code);
38        this.countService.name = this.name;
39        this.router.navigate(['number']);
40    }
41
42}