[Angular 4.0] router/http/animationsモジュールの更新について

Angular 4.0特集のラストはrouterモジュール、httpモジュールの変更と、新たに追加されたanimationsモジュールについての解説です。

routerモジュールの変更

イベントの追加

Routerが発火するイベントに、Lazy Loading用のRouteConfigLoadStartとRouteConfigLoadEndが追加されました。 RouterModule.forChild()で遅延して読み込まれた設定をRouterに取り込みはじめた時と、それが終わった時に発火されます。

`runGuardsAndResolvers`設定の追加

Routeに新しくrunGuardsAndResolversプロパティが追加されました。これは同じルートが選択されているときに、GuardやResolverが再実行するタイミングを制御するためのものです。

runGuardsAndResolversが取り得る値は paramsChange、paramsOrQueryParamsChangeそしてalwaysの3種類です。 paramsChangeはデフォルトの設定で、これまでの挙動と同じです。 GuardとResolverが再実行するのはパスパラメータかマトリクスパラメータが変わったときだけです。 paramsOrQueryParamsChangeでは、デフォルトの挙動に加えてクエリパラメータの変更時にも再実行されます。そしてalwaysではあらゆるナビゲーションで再実行されます。

runGuardsAndResolversは次のように設定します。

{
    path: 'admin',
    component: AdminCmp,
    runGuardsAndResolvers: 'paramsChange',
    canActivate: [AdminAuth]
},

httpモジュールの変更

リクエストオプションの`search`が非推奨に

RequestOptions型のsearchプロパティが非推奨のAPIとなります。このプロパティはリクエストURLにクエリパラメータを付与するためのものでしたが、今後は新しく追加されるparamsプロパティを使います。

次のコードを見ればとても使いやすくなることがわかります。

// Before
const search = new URLSearchParams();
search.append('id', 'foo');
search.append('name', 'bar');

this.http.get(url, {search});

// After
this.http.get(url, {params: {id: 'foo', name: 'bar'}});

これまでsearchプロパティが受け取るオブジェクトの型はstring|URLSearchParamsでしたが、 4.0以降はこれに加えて{[key: string]: any|any[]}型のマップオブジェクトを受け取ることができます。 paramsプロパティも同じ型のオブジェクトを受け取れます。内部的にはparamsをパースして内部のsearchプロパティを組み立てる、という処理になっているので、 4.x系の間は破壊的変更を防ぐためにどちらのプロパティも同じ挙動で動作しますが、 5.0からはsearchプロパティは外部からは見えないようになります。

animationsモジュール

animationsモジュールはこれまでcoreモジュールに同梱されていたアニメーションAPIを、独立したモジュールに分割したものです。アニメーションを必要としないアプリケーションが不要なコードを含まないようにすることを目的としています。

また、animationsモジュールはさらに便利になる新しいAPIがいくつも開発中です。まだ4.0ではリリースされませんが、ひとつだけ4.0に含まれる変更があるので紹介します。

transition式の関数サポート

transitionの第1引数はこれまで文字列でhide => showや* => voidなど定義していましたが、これに加えてfromStateとtoStateを受け取ってbooleanを返す関数を渡せるようになります。次のコード例を見てください。

transition('hide => show', ...)
// equivalent to
const hide2show = (from, to) => from === 'hide' && to === 'show';
transition(hide2show, ...)

transition('void => *', ...)
// equivalent to
const fromVoid = (from, to) => from === 'void';
transition(fromVoid, ...)

まとめ

Lazy Loadingのサポート強化
Guard/Resolveがさらに便利に
Httpのsearchが非推奨に
animationsモジュールの追加

Angular 4.0 Features