Я пытаюсь объявить пользовательский компонент для использования на двух разных страницах (моего ионного приложения), но получаю ошибку

Question

Я пытаюсь использовать пользовательский компонент UserCardComponent на двух разных страницах в моем приложении ionic v3.

Я последовал этому ответу (тот, который получил 26 голосов), в котором говорится об объявлении пользовательских компонентов в "файле module.ts конкретной страницы". Пользовательский компонент в ионном 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 {}

Затем я попытался объявить его (таким же образом) в ContactsPageModule для использования в contacts.html, однако получаю следующую ошибку:

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

Когда я пытаюсь просто объявить UserCardComponent в файле app.module.ts, я получаю ошибку разбора шаблона, и пользовательский компонент не будет работать ни на одной странице.

Можете ли вы посоветовать мне, что делать? В сообщении об ошибке говорится о перемещении «UserCardComponent в модуль более высокого уровня, который импортирует HomePageModule и ContactsPageModule.»
Можете ли вы сказать мне, как я это сделаю? Я новичок в ионике. Спасибо

Answer 1

Если вы объявляете UserCardComponent в HomePageModule, вам нужно только импортировать HomePageModule в ContactsPageModule, но это вносит грязную зависимость между этими модулями.

Лучший способ - этообъявить UserCardComponent в определенном модуле UserCardModule и затем импортировать этот конкретный модуль в HomePageModule и в ContactsPageModule.

user-card.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 {}