ListDetailsPage是2个模块的一部分,请将ListDetailsPage移动到导入AppModule和ListDetailsPageModule的更高模块

Question

我是ionic3的新手,我有2页,一个是列表页面,有上市,我从Rest API获取该列表,当我点击该列表中的特定项目,那时我想获得该页面的详细信息,但是当我点击特定项目时我收到错误:ListDetailsPage is part of the declaration of 2 modules, Please consider moving ListDetailsPage to a higher module that imports AppModule and ListDetailsPageModule,有谁可以请帮助我为什么我收到此错误？在这里,我添加了我的所有代码,

1)app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { ListDetailsPage } from '../pages/list-details/list-details';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    ListPage,
    ListDetailsPage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,    
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    ListPage,
    ListDetailsPage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

2)list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';

/**
 * Generated class for the ListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-list',
  templateUrl: 'list.html',
})
export class ListPage {     

  list: Observable <any>;

  constructor(public navCtrl: NavController, public navParams: NavParams,public httpClient: HttpClient) {
        this.list = this.httpClient.get('https://swapi.co/api/films');
        /*this.list
        .subscribe(data => {
          console.log('my data: ', data);
        })*/  
  }   

  openDetails(list) {
    this.navCtrl.push('ListDetailsPage', {list:list});
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListPage');
  }

}

3)list.details.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the ListDetailsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-list-details',
  templateUrl: 'list-details.html',
})
export class ListDetailsPage {
  list_detail: any;  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.list_detail = this.navParams.get('list');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ListDetailsPage');
  }

}

4)list.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ListPage } from './list';



@NgModule({
  declarations: [
    ListPage
  ],
  imports: [
    IonicPageModule.forChild(ListPage)
  ],
})
export class ListPageModule {}

5)list-details.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ListDetailsPage } from './list-details';

@NgModule({
  declarations: [
    ListDetailsPage,
  ],
  imports: [
    IonicPageModule.forChild(ListDetailsPage),
  ],
})
export class ListDetailsPageModule {}

Answer 1

此错误的原因ListDetailsPage包含在declarationslist-details.module.ts和app.module.ts数组中.您应该ListDetailsPage只在一个地方申报.要修复此错误,请ListDetailsPage从declarationsapp.module.ts中删除并添加ListDetailsPageModule到importsapp.module.ts数组中.

   @NgModule({
      declarations: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        ListPage,
        TabsPage
      ],
      imports: [
        ...  
        ListDetailsPageModule 
      ]
    })
    export class AppModule {}