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

やりたいこと app-xx-skeletonやapp-alertのような、「どのページ・要素からも使う可能性のあるコンポーネント」を作りたい 実際にやった方法 Moduleを作る 「複数のModuleでdeclarati […]

広告ここから
広告ここまで

目次

    やりたいこと

    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,

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark