Ionic Angularで汎用的に利用したいカスタムComponentを作る方法の覚書

やりたいこと

app-xx-skeletonapp-alertのような、「どのページ・要素からも使う可能性のあるコンポーネント」を作りたい

実際にやった方法

Moduleを作る

「複数のModuleでdeclarationsすることはできない」かつ「declarationsしていないとそのModule配下で要素が使えない」状態になるので、汎用コンポーネントのModuleを作ります。

$ ionic g m common-component

Componentを作る

続いて作りたいコンポーネントファイルを作ります。

$ ionic g c  common-component/my-custom

Componentのdeclarationrとexportをする

作成したModuleで定義とエクスポートを行います。


@NgModule({
  // 追加ここから
  declarations: [MyCustomComponent],
  exports: [MyCustomComponent],
  // 追加ここまで
  imports: [
    CommonModule
  ]
})

要素を使いたいModuleでImportする

あとは使いたい場所のModuleでImportすればOKです。

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CommonComponentModule,

Comment