OnsNavigatorディレクティブ

Angular 2バインディング下では、<ons-navigator>要素にはOnsNavigatorディレクティブが適用されます。OnsNavigatorディレクティブは、Angular 2のコンポーネントを読み込めるように<ons-navigator>を拡張します。

<ons-navigator>要素でAngular 2のコンポーネントを読み込むには、次のように[page]バインディングを用います。

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Page</div>
    </ons-toolbar>
    <div class="content">
      ...
    </div>
  `
})
class DefaultPageComponent { }

@Component({
  selector: 'app',
  template: `
  <ons-navigator [page]="page"></ons-navigator>
  `
})
class AppComponent {
  page = DefaultPageComponent
}

<ons-navigator>内に読み込むコンポーネントのselectorには必ずons-pageを指定してください。この例では、DefaultPageComponentのselectorはons-pageです。

コンポーネントから<ons-navigator>を参照する

テンプレート内に<ons-navigator>がある場合には、ViewChildデコレータを使ってOnsNavigatorオブジェクトを代入することができます。OnsNavigatorオブジェクトのelementプロパティには

@Component({
  selector: 'app',
  template: `
  <ons-navigator [page]="page"></ons-navigator>
  `
})
class AppComponent {
  page = DefaultPageComponent

  @ViewChild(OnsNavigator) navigator;

  doSomething() {
    this.navigator.element.pushPage();
  }
}

ページからOnsNavigatorを参照する

<ons-navigator>要素内で読み込まれたページのコンポーネントが<ons-navigator>を参照するには、ViewChild()デコレータは使わずに代わりにDIを使います。

具体的には、ページのコンポーネントのコンストラクタの引数にOnsNavigatorを宣言すると、それが代入されます。

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Page</div>
    </ons-toolbar>
    <div class="content">...</div>
  `
})
class PageComponent {
  constructor(navigator: OnsNavigator, private _params: Params) {
    console.log(navigator);
  }
}

pushPage()する

Angular2以下ではpushPage()の引数にはページのURLではなくコンポーネントのクラスを指定することができます。

navigatorElement.pushPage(PageComponent);

pushPage()する際にデータを受け渡しする

pushPage()の第二引数のdataオプションには、読み込むページンポーネントに渡すデータを指定することができます。

const data = {foo: 'bar'};
navigatorElement.pushPage(PageComponent, {data: data});

@Component({
  selector: 'ons-page',
  template: `
    <ons-toolbar>
      <div class="center">Page</div>
    </ons-toolbar>
    <div class="content">...</div>
  `
})
class PageComponent {
  constructor(navigator: OnsNavigator, params: Params) {
    console.log(params.data); // {foo: 'bar'}が表示される
  }
}

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

Angular 2アプリケーションでは、読み込まれるコンポーネントをあらかじめリストにする必要があります。<ons-navigator>要素に読み込まれるページコンポーネントを、NgModuleのdeclarationsオプションとentryComponentsオプションに追加することを忘れないでください。

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

もしこれを忘れると、コンポーネントの読み込み時にエラーを出すことになります。

詳細は、Angular 2のAngular Modules - NgModuleを参照して下さい。