Ionic Angularで汎用的に利用したいカスタムComponentを作る方法の覚書
やりたいこと app-xx-skeletonやapp-alertのような、「どのページ・要素からも使う可能性のあるコンポーネント」を作りたい 実際にやった方法 Moduleを作る 「複数のModuleでdeclarati […]
広告ここから
広告ここまで
目次
やりたいこと
app-xx-skeleton
やapp-alert
のような、「どのページ・要素からも使う可能性のあるコンポーネント」を作りたい
実際にやった方法
Moduleを作る
「複数のModuleでdeclarations
することはできない」かつ「declarations
していないとそのModule配下で要素が使えない」状態になるので、汎用コンポーネントのModuleを作ります。
$ ionic g m common-component
Componentを作る
続いて作りたいコンポーネントファイルを作ります。
$ ionic g c common-component/my-custom
Componentのdeclaration
rとexport
をする
作成したModuleで定義とエクスポートを行います。
@NgModule({
// 追加ここから
declarations: [MyCustomComponent],
exports: [MyCustomComponent],
// 追加ここまで
imports: [
CommonModule
]
})
要素を使いたいModuleでImportする
あとは使いたい場所のModuleでImportすればOKです。
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
CommonComponentModule,