Ionic でカスタムコンポーネント

最近 Ionic を触ってハマったのでメモ。

目的 コンポーネント hoge をページ fuga から呼び出す。つまり、 fuga.html に以下のように記述できるようにする。

<hoge></hoge>

はじめます。コマンドからコンポーネントを作成する。

$ ionic g
? What would you like to generate: component
? What should the name be? hoge

/components/components.modules.ts に、作成したコンポーネントへの参照が追加される。なので呼び出し側からはこいつを参照すればよい。

呼び出し側のページを fuga とすると、 fuga.module.ts から下のように参照する。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FugaPage } from './fuga';
import { ComponentsModule } from '../../components/components.module'; // 追加

@NgModule({
  declarations: [
    FugaPage,
  ],
  imports: [
    ComponentsModule, // 追加
    IonicPageModule.forChild(FugaPage),
  ],
})

これでも hoge が見つからない旨のエラーが出る時がある。 fuga をモジュールとして扱えていない。app.module.ts

import { Fuga } from '../pages/fuga/fuga'

import { FugaModule } from '../pages/fuga/fuga.module'

とする。さらに、同じく app.module.tsdeclarationsentryComponents などに入っていたらこれらから削除し、 imports に移動する。

晴れて、 fuga から呼び出せる。

<hoge></hoge>

参考:

http://evalogical.com/blog/components-ionic-framework-3

https://stackoverflow.com/a/45032201