私は、私のionic v3アプリケーションの2つの異なるページでUserCardComponentというカスタムコンポーネントを使用しようとしています。
私は、この回答(26票を持つもの)に続いて、 "特定のページのmodule.tsファイル"にカスタムコンポーネントを宣言しています。ionic v3のカスタムコンポーネント
だから私は最初に私のHomePageModuleでコンポーネントを宣言し、home.html内でそれをうまく使うことができました。
home.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardComponent } from '../../components/user-card/user-card';
@NgModule({
declarations: [
HomePage,
UserCardComponent
],
imports: [
IonicPageModule.forChild(HomePage)
],
})
export class HomePageModule {}
私はそれからcontacts.htmlで使用するContactsPageModuleで(同じ方法で)宣言しようとしましたが、次のエラーが発生します。
Type UserCardComponent is part of the declarations of 2 modules: HomePageModule and ContactsPageModule!
Please consider moving UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule.
You can also create a new NgModule that exports and includes UserCardComponent then import that NgModule in HomePageModule and ContactsPageModule
app.module.tsファイルでUserCardComponentを宣言しようとすると、テンプレート解析エラーが発生し、カスタムコンポーネントはどのページでも動作しません。
あなたは私に何をすべきかアドバイスできますか?このエラーは、「UserCardComponent」をHomePageModuleとContactsPageModuleをインポートする上位モジュールに移動するように指示しています。
どうすればいいのか教えていただけますか?私はイオンに新しいです。ありがとう
あなたがUserCardComponent
の中にHomePageModule
、あなただけをインポートする必要がありますHomePageModule
の中にContactsPageModule
これらのモジュールの間には汚れた依存関係が導入されています。
より良い方法は宣言することですUserCardComponent
特定のモジュールでUserCardModule
この特定のモジュールをHomePageModule
そしてContactsPageModule
。
ユーザーカード.module.ts
import { NgModule } from '@angular/core';
import { UserCardComponent } from './user-card';
@NgModule({
declarations: [
UserCardComponent
]
})
export class UserCardModule {}
home.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardModule } from '../../components/user-card/user-card.module';
@NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage),
UserCardModule
],
})
export class HomePageModule {}