Angular 2 라우팅에서 지연 처리를 끼우는 방법

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
htp://cぉck 케임 r. jp/ぁbs/



사용자 테스트를 한 결과 다음과 같은 사실을 알았습니다.

HTML5 모드 (PushState)를 사용하여 화면 전환

처음에는 연출을 포함하지 않았고 화면이 빨리 전환됩니다

URL도 디렉토리를 파낸 모양

SPA가 아닌 다른 HTML 페이지로 날아간 것 같았다

체감상, Angular 2를 채용한 의미가 없다＼(^o^)／

그 때문에, 라우팅에서의 화면 천이시에 페이드 처리를 넣었습니다. 페이드 처리는 CSS3 Transition을 사용합니다. Angular2가 트리거되고 CSS 클래스를 [ngClass] 설명으로 할당합니다.

덕분에 사용자 테스트를 통해 SPA라는 것을 알게되었습니다

요약

Angular2의 라우팅 구현시 비동기 처리를 넣고 싶을 때 도움이되면 다행입니다.