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包含在list-details.module.ts和app.module.ts的declarations数组中。您只能在一个地方声明ListDetailsPage。要解决此错误，请从app.module.ts的ListDetailsPage中删除declarations，然后将ListDetailsPageModule添加到app.module.ts的imports数组中。

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

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

1 个答案: