web-dev-qa-db-ja.com

Ionic 3カスタムコンポーネントのインポート

Ionic 3のページにカスタムコンポーネントをインポートするのに行き詰まっています。これは、Ionic 2では比較的簡単でしたが、動作させることができないようです。 in Ionic 3。

otherという名前の既存のページモジュールがあります。ionic g component testを実行した後、自動生成されたComponentsModuleをother.module.tsにインポートし、それをimports配列に追加します。

import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    OtherPage,
  ],
  imports: [
    IonicPageModule.forChild(OtherPage),
    ComponentsModule,

    ],
})
export class OtherPageModule {}

次に、コンポーネントセレクターを<test></test>としてページに追加します。

これはエラーになります：

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
'test' is not a known element:
1. If 'test' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ion-content padding>
[ERROR ->]<test> </test>
</ion-content>
"): ng:///AppModule/OtherPage.html@16:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
'test' is not a known element:
1. If 'test' is an Angular component, then verify that it is part of this module.

これは私にはうまくいきません。また、テストコンポーネント用にmoduleを作成し、同じ方法でインポートしようとしましたが、これは機能しません。

これに関するドキュメントや例が見つからないようです。カスタムコンポーネントはIonic 3にどのようにインポートされますか？

angularionic-frameworkionic2ionic3
7
fitzmode

これが私がそれを解決した方法です：

  1. custom-component.tsがクラスCustomComponentをエクスポートするとします。

  2. 以下に示すように、custom-component.module.tsで同じものをインポートします。

    import { CustomComponent } from './custom-component';

@NgModule({
  declarations: [
    CustomComponent,
  ],
  imports: [
    IonicPageModule.forChild(CustomComponent),
  ],
  exports : [ CustomComponent ]
})
export class CustomComponentPageModule { }

  3. 次に、以下に示すように、カスタムコンポーネントを目的のページにインポートします。

    import { ContentDrawerPageModule } from '../../../components/custom-component/custom-component.module';

@NgModule({
  declarations: [
    HelloWorldPage,
  ],
  imports: [
    IonicPageModule.forChild(HelloWorldPage),
    CustomComponentPageModule,
  ]
})
export class HelloWorldPageModule {}

これで、カスタムコンポーネント（CustomComponent）がページに正常にインポートされました（HelloWorldPage）。

3
Kapil Sharma

ここに示されているように https://github.com/ionic-team/ionic/issues/1156

残念ながら、遅延ロードコンポーネント、ディレクティブ、パイプを作成する方法はありません。とにかくあなたがそれを管理するかどうか私たちに知らせてください。

したがって、ComponentsModuleをpage.module.tsにインポートできます。これが私のものです。

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

@NgModule({
  declarations: [
    WoDetailsPage,

  ],
  imports: [
    ComponentsModule,
    IonicPageModule.forChild(WoDetailsPage),
  ],
})
export class WoDetailsPageModule {}
1
umki

testコンポーネントをエクスポートする必要があります。

@NgModule({
  declarations: [
    TestComponent,
  ],
  imports: [],
  exports: [TestComponent]
})
export class ComponentModule {}
0
dlcardozo

これは私が以下のリンクをたどることによってそれを解決した方法です：
http://evalogical.com/blog/components-ionic-framework-

  1. このようにhome.tsファイルにコンポーネントをインポートします。
    import { MyComponent } from '../../components/my/my';

  2. home.module.tsでComponentsModuleをインポートし、次のようにインポートに追加します。

    import { NgModule } from '@angular/core';  
import { IonicPageModule } from 'ionic-angular';  
import { HomePage } from './home';  
import { ComponentsModule } from '../../components/components.module';  
@NgModule({  
declarations: [  
HomePage,  
],  
imports: [  
IonicPageModule.forChild(HomePage),  
ComponentsModule  
],  
})  
export class HomePageModule {}

  3. IonicPageModuleをcomponents.module.tsファイルにインポートします。ここでは、このようなスキーマにCUSTOM_ELEMENTS_SCHEMAをインポートする必要があります。

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
import { MyComponent } from './my/my';  
import { IonicPageModule } from 'ionic-angular';  
@NgModule({  
declarations: [MyComponent],  
imports: [IonicPageModule.forChild(MyComponent)],  
exports: [MyComponent],  
schemas: [CUSTOM_ELEMENTS_SCHEMA]  
})  
export class ComponentsModule {}

  4. 行を削除します
    import { HomePage } from '../pages/home/home';app.module.tsファイルから、代わりに次の行import { HomePageModule } from '../pages/home/home.module';を追加します

  5. これで、コンポーネントのセレクターをhome.htmlファイルのhtmlタグとして使用できます。

0
Premasish Gupta

myComponent.tsがコンポーネントの場合。

次に、コマンドionic generate（遅延読み込みを使用しない場合）によって生成されたモジュールを削除し、app.module.tsに直接以下を追加できます。

    @NgModule({
      declarations: [
        MyComponent,
      ]
      entryComponents: [
        MyComponent
      ] });

そしてmyComponent.tsは次のようになります：

@Component({
  selector: 'app-sheduler',
  templateUrl: 'sheduler.html'
})
export class ShedulerComponent {}
0
Boris Detry

あなたは以下のようにそれをする必要があります：

import { ComponentsModule } from "../../components/components.module";
@NgModule({
  declarations: [
    OtherPage,
    ComponentsModule,
  ],
  imports: [
    IonicPageModule.forChild(OtherPage),

    ],
  entryComponents: [
    ComponentsModule
  ]
})
export class OtherPageModule {}
0
Prerak Tiwari

モジュールで CUSTOM_ELEMENTS_SCHEMA 宣言を正常に使用した後、セレクターに「-」ダッシュで名前を付ける必要があるため、次のようなものを使用する必要があります。

<MyPlayer-comp></MyPlayer-comp>

それが機能し、ngcが「...既知の要素ではない...」について文句を言わなくなったにもかかわらず、私はこれらのフレームワークのキャメルケースフリークからのこのまったく無意味なことに腹を立てました。

私は個人的にpreferすべてを同じ名前にします（クラス、セレクター、ファイルなど...）

Web用にビルドしている間、遅延読み込みで動作している次の状態に戻りました。 （ionic cordova build browser --prod --release）

カスタムコンポーネントモジュールの宣言：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { MyPlayerComp } from './MyPlayerComp ';
//
@NgModule({
    declarations: [MyPlayerComp ],
    imports: [IonicPageModule.forChild(MyPlayerComp )],
    exports: [MyPlayerComp ],
})
export class MyPlayerCompModule { }

カスタムコンポーネントを使用するモジュールでは、以下を使用します。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
//
import { PlyrView } from './PlyrView';
//
import { MyPlayerCompModule } from './MyPlayerComp.module' // 20180720
//
@NgModule({
    declarations: [PlyrView],
    imports: [
        IonicPageModule.forChild(PlyrView),
        MyPlayerCompModule,                      // <<<<<
    ],                
    exports: [PlyrView],
})
export class PlyrViewModule { }

これが誰かに役立つことを願っています

0
Meryem

1つの方法は、各コンポーネントをapp.module.tsファイルに追加してから、次のように宣言することです。

import { MyComp } from "../../components/my-comp/my-comp";
@NgModule({
  declarations: [
    OtherPage,
    MyComp
  ],
  imports: [
    IonicPageModule.forChild(OtherPage)
    ],
})
export class OtherPageModule {}
0
Chris Scutt