このガイドでは、Angular 2とOnsen UIを組み合わせて利用する方法について説明します。

プロジェクトを始める

Angular 2フレームワーク下でOnsen UIを利用するには、Onsen UIとAngular2バインディングの2つのコンポーネントをインストールする必要があります。

これらのコンポーネントは、(onsenuiangular2-onsenui)というNPMパッケージとして提供しています。

簡単にプロジェクトをセットアップしたいときには、このパッケージやTypeScriptやWebpackやPolyfillなどの依存を全てダウンロードし、プロジェクトをビルドしてくれるMonaca CLIを利用できます。

Monaca CLIを使う

$ npm install -g monaca # Monaca CLIをインストールする
$ monaca create helloworld # "Angular 2 template"を選択する
$ cd helloworld; monaca preview # Run preview, or "monaca debug" to run on your device

npmからダウンロードする

# Onsen UIとAngular 2バインディングをインストールする
$ npm install onsenui angular2-onsenui

Onsen UIディレクティブとWebコンポーネント

Angular 2バインディングには、Onsen UIが提供しているWeb ComponentsをラップしたいくつかのAngular 2 ディレクティブがあります。これらのディレクティブはOnsenModuleという名前のNgModuleに含まれています。NgModuleについてはAngular 2のドキュメントのAngular Modules (NgModule) - tsを参照してください。

Angular 2アプリケーションを開始する場合には、OnsenModuleをアプリケーションのモジュールにインポートしてください。@NgModuleimportsパラメータにOnsenModuleを指定します。これが無ければOnsen UIに関連するAngular 2 ディレクティブを利用したり、Onsen UIのコンポーネントを正しく扱うことができません。

また、Angular 2アプリケーション下でCustom Elementsを使うのでモジュールのschemasCUSTOM_ELEMENTS_SCHEMAを指定することも忘れないでください。これを設定し忘れると、Custom Elementsの要素をテンプレート内で用いるとエラーが発生しますので注意してください。

import {OnsenModule} from 'angular2-onsenui';
import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

@NgModule({
  imports: [OnsenModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
class AppModule { }

// モジュールを起動する
platformBrowserDynamic().bootstrapModule(AppModule);

動的に読み込むコンポーネントの宣言

OnsNavigatorOnsSplitterContentOnsSplitterSideディレクティブは、動的に他のAngular 2コンポーネントを読み込みます。Angular2では動的に読み込むコンポーネントはNgModuleに登録しなければいけません。例えば、MyComponentというコンポーネントをOnsNavigatorなどで読み込む場合には、@NgModuledeclarationsentryComponentsにコンポーネントの定義を追加しておく必要があります。

@NgModule({
  imports: [OnsenModule],
  declarations: [AppComponent, MyComponent],
  bootstrap: [AppComponent],
  entryComponents: [MyComponent]
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
class AppModule { }

Angular 2バインディングに含まれているディレクティブ

Angular 2バインディングにはOnsen UIの提供するWeb Componentsに対応するディレクティブが幾つか提供されています。例えば、ons-navigatorにはOnsNavigatorディレクティブ、ons-switchにはOnsSwitchディレクティブがあります。

ただ、全てのコンポーネントにディレクティブが提供されているわけではありません。例えば、ons-button要素に対応するディレクティブはありません。これはこのディレクティブを実装する必要がないからです。

現在、次のコンポーネントがAngular 2ディレクティブとして実装されています。

ページを定義する

Onsen UIでは、ons-page要素を使ってページを定義します。他のバインディングとは違って、次のコードのようにons-page要素のコンテンツを囲むcontentクラスを持つdiv要素が必要です。

<ons-page>
  <ons-toolbar> <div class="center">Ons-Page Component Example</div> </ons-toolbar>
  <div class="background"></div>
  <div class="content">
    <div style="text-align: center; margin: 10px;">
      <ons-button (click)="onClick()">MyButton</ons-button>
    </div>
  </div>
</ons-page>

イベントハンドリング

他のAngular 2コンポーネントと同様に、Onsen UIではイベントバインディングをサポートしています。イベントをバインドするには、次のコードのようにイベント名を括弧でくくって、そのイベントが起きた時の振る舞いを属性値に記述してください。

<ons-input type="text" (change)="onChange()"></ons-input>

初期化時にコンポーネントを呼び出す

ディレクティブもWeb Componentsもメソッドを持ち、コンポーネントが初期化された後に呼び出せます。ディレクティブは呼び出し側のコンポーネントのコンストラクタではまだ定義されていないので、初期化時にディレクティブのコンポーネントを呼び出したいときにはngAfterViewInit()メソッドを使うのはひとつの方法です。

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    this._navigator.pushComponent(component, { animation: 'fade' });
  }
}

Web Componentsでは、メソッドはDOM要素に直接定義されています。例えば、querySelector()を使って要素を取得してメソッドを呼び出すことができます。

Angular 2では、DOM要素を参照するのにテンプレートリファレンス変数(#を使う)を使うこともできます。詳細はAngular 2 Guideを参照してください。

サンプルコード

angular2-onsenuiパッケージのリポジトリには、各コンポーネントをAngular 2で使う場合のサンプルコードが収められています。各コンポーネントの実際の例を知るにはこれらのサンプルコードを参照してください。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。