私はIonic 3のページにカスタムコンポーネントをインポートすることに固執しています。これはIonic 2では比較的些細でしたが、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でインポートされますか?
あなたは以下のようにそれを行う必要があります:
import { ComponentsModule } from "../../components/components.module";
@NgModule({
declarations: [
OtherPage,
ComponentsModule,
],
imports: [
IonicPageModule.forChild(OtherPage),
],
entryComponents: [
ComponentsModule
]
})
export class OtherPageModule {}
あなたはtest
成分。
@NgModule({
declarations: [
TestComponent,
],
imports: [],
exports: [TestComponent]
})
export class ComponentModule {}
ここに示すようにhttps://github.com/ionic-team/ionic/issues/11560
残念ながら、遅延ロードコンポーネント、ディレクティブ、パイプを作成する方法はありません。あなたがそれを管理するかどうかわかりません。
したがって、Components.moduleを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 {}
@NgModule({ imports:[IonicModule], //no forRoot here declarations:[HomePage], exports:[HomePage], entryComponents:[HomePage] //<-- add all your module components to here })
- Sameer Achanta
1つの方法は、各コンポーネントをapp.module.tsファイルに追加し、次のように宣言することです。
import { MyComp } from "../../components/my-comp/my-comp";
@NgModule({
declarations: [
OtherPage,
MyComp
],
imports: [
IonicPageModule.forChild(OtherPage)
],
})
export class OtherPageModule {}
これが私がそれを解決した方法です:
CustomComponent
。同じものをインポートするcustom-component.module.ts以下に示すように:
import { CustomComponent } from './custom-component';
@NgModule({
declarations: [
CustomComponent,
],
imports: [
IonicPageModule.forChild(CustomComponent),
],
exports : [ CustomComponent ]
})
export class CustomComponentPageModule { }
次に、カスタムコンポーネントを必要なページにインポートします(下図参照)。
import { ContentDrawerPageModule } from '../../../components/custom-component/custom-component.module';
@NgModule({
declarations: [
HelloWorldPage,
],
imports: [
IonicPageModule.forChild(HelloWorldPage),
CustomComponentPageModule,
]
})
export class HelloWorldPageModule {}
そして、カスタムコンポーネントを正常にインポートしました。(CustomComponent
)あなたのページへ(HelloWorldPage)。
正常に使用した後CUSTOM_ELEMENTS_SCHEMA私のモジュール内の宣言とセレクタに " - "ダッシュを付けるよう強制するので、私は次のようなものを使わなければなりません:
<MyPlayer-comp></MyPlayer-comp>
私は、たとえそれが働いていて、もはや "...知られていない要素について..."と不平を言わなくても、これらのフレームワークのキャメルケースのフリークから、この完全な非感覚で動揺していました。
私は個人的に好むすべて同じ名前を付ける(クラス、セレクタ、ファイルなど)
私はウェブのためにビルド中に遅延ロードで動作する以下に戻った。 (ionic cordovaビルドブラウザ--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 { }
これが誰かを助けること
これは、私がそれを解決した方法です。以下のリンクに従ってください:
http://evalogical.com/blog/components-ionic-framework-3
コンポーネントをhome.ts
このようなファイル、
import { MyComponent } from '../../components/my/my';
に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 {}
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 {}
行を削除する
import { HomePage } from '../pages/home/home';
からapp.module.ts
ファイルに追加し、代わりに次の行を追加しますimport { HomePageModule } from '../pages/home/home.module';
これでコンポーネントのセレクタをHTMLタグとして使用できますhome.html
ファイル