JavaScript
AngularJS
Angular2

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

More than 3 years have passed since last update.

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

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


動作デモ

http://plnkr.co/edit/SJy7RBzjQgyucQdEcJmH?p=preview


実装ポイント


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

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


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

ルーティングの遷移時において、非同期処理を挟みたいクラスに、OnActivateOnDeactivateインターフェースを指定。すると、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/

ClockMaker Labs

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


  • HTML5モード(PushState)を使って画面遷移をしている

  • 当初は演出を入っておらずパッと画面が切り替わる

  • URLもディレクトリを掘ったような形

  • SPAではなく、別のHTMLページに飛んだものだと思われた

  • 体感上、Angular 2を採用した意味が無い\(^o^)/

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

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


まとめ

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