0

私は、私の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をインポートする上位モジュールに移動するように指示しています。

どうすればいいのか教えていただけますか?私はイオンに新しいです。ありがとう

1 답변


2

あなたが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 {}


  • パーフェクトです。ありがとうございます:)しかし、フォルダの構造はあなたの答えと少し異なります。ユーザーcard.module.tsでは、ユーザーカードのインポートから{UserCardComponent}する必要があります。 home.module.tsの行は、../../ components / user-card / user-card.moduleからimport {UserCardModule}する必要があります。 ...あなたがそれを変えることができるなら、私は正しい答えに印をつけます。多分私はあなたの答えを編集することができますか? - Sarah
  • ありがとう、私はあなたのノートで自分の答えを編集する - JeRivals
  • 完璧な感謝:) - Sarah

リンクされた質問


関連する質問

最近の質問