【Angularサンプルプログラム解説(3)】画面間での値の受け渡しについて

はじめに

前回に引き続き、Angularで作成したショッピングサイトをイメージしたサンプルアプリの解説を行います。

前回の解説はこちらを参照

【Angularサンプルプログラム解説(1)】ヘッダメニューについて

 

今回は、作成したサンプルプログラムの画面間での値の受け渡しにポイントを絞って、

プログラムの解説を行います。

 

たとえば、登録画面⇒確認画面では値の受け渡しを行っています。

 

環境

  • OS:OS X 10.11 El Capitan
  • node:v8.1.0
  • Angular CLI:1.2.7
  • Visual Studio Code:1.13

前提

以下からソースコードを取得している前提で説明を行います。

ショッピングサイトサンプルプログラム

 

 

解説

以下の2点について解説していきます。

  1. 画面項目引き継ぎサービスについて
  2. 入画面項目引き継ぎサービスを利用した値の設定・取得・初期化について

 

1.画面項目引き継ぎサービスについて

画面項目を画面間で引き継ぐために、

今回は引き継ぎ専用のサービスを用意し、画面遷移元と遷移先でそれを利用しました。

まずはその部分について確認していきます。

src/app/services/goodspass.service.ts
import { Injectable }    from '@angular/core';

import { Goods } from './goods';

@Injectable()
export class GoodsPassService {  

  //サービス起動時に、コンストラクタで利用するものをインスタンス化
  constructor() { }

  /** コンポーネント間受け渡し商品 */
  private goods : Goods;
  /** コンポーネントリフレッシュフラグ(falseの場合はリフレッシュしない) */
  private refleshFlg : Boolean = true;

  /** コンポーネント間受け渡し商品設定 */
  setGoods(goods: Goods) : void {
    //リクエストパラメータセット
    this.goods = goods;
  }
  /** コンポーネント間受け渡し商品取得 */
  getGoods() : Goods {
    return this.goods;
  }

  /** リフレッシュフラグ設定 */
  setRefleshFlg(refleshFlg: Boolean) {
    this.refleshFlg = refleshFlg;
  }
 /** リフレッシュフラグ取得 */
  getRefleshFlg() {
    return this.refleshFlg;
  }
  
  /** コンポーネント間受け渡し商品リフレッシュ */
  refleshGoods() : void {
    this.goods = new Goods;
  }


}

上のサービスには以下4つの特徴があります。

  • 画面間で受け渡す値(goods)が保持できる
  • 画面間で受け渡す値を設定するメソッド(setGoods)を持つ
  • 画面間で受け渡す値を取得するメソッド(getGoods)を持つ
  • 保持している値をリフレッシュするメソッド(refleshGoods)を持つ

画面項目引き継ぎサービスは、遷移元の画面でsetGoods利用して受け渡したい値を設定し、遷移先の画面でgetGoodsを利用して値を取得し、サービスが保持している値をrefleshGoodsを利用してリフレッシュ。

という流れで利用します。

絵にするとこんな感じです。

 

2.入画面項目引き継ぎサービスを利用した値の設定・取得について

画面遷移元でsetGoodsを利用している部分について確認します。

src/app/goods/goodsregist.component.html
・
・
・
                        <button *ngIf="isUpdate && goods.picture" md-raised-button color="accent" class="changeImg" (click)="changeImage()"><label>変更</label><md-icon>cached</md-icon></button>
                        <fancy-image-uploader *ngIf="!isUpdate || !goods.picture" [options]="options" (onUpload)="onUpload($event)" (change)="fileChangeEvent($event)"></fancy-image-uploader>
                        <img *ngIf="isUpdate && goods.picture" src="{{googleDrivePictureUrl}}{{goods.picture}}">
                        <md-input-container class="hidden">
                            <input mdInput placeholder="画像" class="hidden" maxlength="255" [(ngModel)]="goods.picture" [ngModelOptions]="{standalone: true}">
                        </md-input-container>
                        <br/>
                        <br/>
                    </tr>
                    <tr>
                        <button md-raised-button [disabled]="!goodsForm.valid" color="primary" (click)="goodsPassSet()" routerLink="/goodsregistconfirm" >確認画面へ</button>
                    </tr>
                </table>
            </form>
        </md-card-content>
    </div>
</md-card>

 

src/app/goods/goodsregist.component.ts
・
・
・

  /** 画面入力値をコンポーネント間で受け渡せるように設定 */
  goodsPassSet() {
    this.goodsPassService.setGoods(this.goods);
  }
・
・
・

 

MEMO
「確認画面へ」ボタンを押下して画面遷移する際、クリックイベントをトリガーに動作するgoodsPassSet()によって画面引き継ぎサービス(goodsPassService)へ値を設定しています。

 

次に、画面遷移先で画面引き継ぎサービスから値を取得している部分について確認します。

src/app/goods/goodsregistconfirm.component.ts
・
・
・
  constructor(private userPassService: UserPassService, private goodsPassService: GoodsPassService, private goodsService : GoodsService, private router: Router) { 
    this.goods = goodsPassService.getGoods();
    // ログインユーザのIDを指定
    this.goods.registerId = userPassService.getUser().userId;
  }
・
・
・
MEMO

コンポーネント生成時のconstructorの処理で、

画面引き継ぎサービス(goodsPassService)から値を取得し、取得した値を画面項目としてセットしています。

 

 

おわりに

今回は、画面間での値の受け渡し方法についてサンプルプログラムを用いて解説しました。

ポイントは以下3点でしたね。

  • 値受け渡しサービスの作成
  • 画面遷移元で値受け渡しサービスへの画面項目設定
  • 画面遷移先で値受け渡しサービスからの画面項目取得

 

画面遷移で行ったり来たりする場合、

引き継ぎ項目を詰め直したり、リフレッシュしたりするのをお忘れなく。。。

そういうのを忘れて発生するバグによく遭遇します、

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください