Popover

ons-popoverはpopoverを表示することができる要素です。ここではAngular 2下では、ons-popoverとPopoverFactoryを使ってpopoverを表示するコンポーネントを作成します。

まず、ons-popoverをテンプレートのルートに置いたコンポーネントを宣言します。

@Component({
  template: `
    <ons-popover direction="up down" cancelable #popover>
      <div style="text-align: center; opacity: 0.7;">
        <p>HelloWorld!</p>
      </div>
    </ons-popover>
  `
})
class MyPopoverComponent implements OnInit {
}

次にPopoverFactoryを使ってコンポーネントを生成します。

export class AppComponent implements OnInit, OnDestroy {
  private _popover: any;
  private _destroyPopover: Function;

  constructor(private _popoverFactory: PopoverFactory) { }

  ngOnInit() {
    this._popoverFactory
      .createPopover(MyPopoverComponent, {msg: 'This is popover.'})
      .then(({popover, destroy}) => {
        this._popover = popover;
        this._destroyPopover = destroy;
      });
  }

  ngOnDestroy() {
    this._destroyPopover();
  }
}

popoverを表示するには、取得したons-popover要素のshow()メソッドを呼び出します。show()メソッドの第一引数には、popoverを表示する位置のベースとなる要素を指定します。

this._popover.show(button);

基本的にはAlertDialogFactoryやDialogFactoryと変わりません。AlertDialogやDialogと同様に、ngOnDestroyで作成したポップオーバーを破棄することを忘れないでください。

NgModuleへのコンポーネントの追加

PopoverFactoryを使って読み込むコンポーネントは、NgModuleのdeclarationsとentryComponentsに追加することを忘れないでください。

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