Angular 2のルーティングで遅延処理を挟む方法 #JavaScript

Angular 2の「ルーティング」。SPA (シングルページアプリケーション)でディープリンクを実装する機能がAngular2にも搭載されてます。

ルーティングでページ遷移時に非同期処理を挟むときの方法をまとめました。

動作デモ

実装ポイント

HTMLにルーターの参照を入れる (必須)

<script src="node_modules/angular2/bundles/router.dev.js"></script>

インターフェースを実装する (たぶん必須)

ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateとOnDeactivateインターフェースを指定。すると、routerOnActivate()メソッドとrouterOnDeactivate()メソッドの実装が義務付けられます。これがルーティング時のライフサイクルイベントとなります。

import {OnActivate} from "angular2/router";
import {OnDeactivate} from "angular2/router";
import {ComponentInstruction} from "angular2/router";

class ほげほげくらす implements OnActivate, OnDeactivate  {
  /** 遷移で入ってきたとき */
  routerOnActivate(nextInstruction:ComponentInstruction, prevInstruction:ComponentInstruction) {
    // ここに非同期処理
  }
  /** 遷移ででていくとき */
  routerOnDeactivate(nextInstruction:ComponentInstruction, prevInstruction:ComponentInstruction) {
    // ここに非同期処理
  }
}

それぞれの関数に Promise で非同期処理を実装する (必須)

例えば次のような形で非同期処理を実装します。setTimeout()メソッドで適当に非同期処理をしていますが、Promiseインスタンスをreturnで返してやればOK。

/** 遷移で入ってきたとき */
routerOnActivate(nextInstruction:ComponentInstruction, prevInstruction:ComponentInstruction) {
  // ここに非同期処理
  return new Promise((res, rej) => {
    setTimeout(() => {
      // 非同期処理終了の通達をする
      res('用意ができたよ');
    }, 1000);
  }).then();
}

環境

Angular 2 beta 3
TypeScript 1.7

実戦投入の紹介

私のポートフォリオサイトをAngular2でリニューアルしたのですが、その中でルーティングを使っています。

ClockMaker Labs - Interaction Design × Web Technology
http://clockmaker.jp/labs/

ユーザーテストをしたところ、次のことがわかりがっかりしたのです

HTML5モード(PushState)を使って画面遷移をしている
当初は演出を入っておらずパッと画面が切り替わる
URLもディレクトリを掘ったような形
SPAではなく、別のHTMLページに飛んだものだと思われた
体感上、Angular 2を採用した意味が無い＼(^o^)／

そのため、ルーティングでの画面遷移時にフェード処理をいれました。フェード処理はCSS3 Transitionを使っています。 Angular2がトリガーとなり、CSSのクラスを[ngClass]記述で割り当てています。

そのおかげで、ユーザーテストするとSPAだと気づいてもらえました

まとめ

Angular2のルーティング実装の際、非同期処理入れたいときに参考になれば幸いです。