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,

ブックマークや限定記事（予定）など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

アカウントを作成する