Question

我正在尝试使用ionic2开发我的第一个应用程序。我开始做我的第一页，一切正常，然后我决定添加第二页，我遇到了一个问题。当我点击应打开下一页的按钮时，它会被加载，但出现以下错误：

运行时错误

./NewsHeadline类中的错误NewsHeadline - 内联模板：7：1导致：没有为NewsPage找到组件工厂

堆栈

错误：没有为NewsPage找到组件工厂......

Ionic Framework: 2.0.0
Ionic Native: 2.4.1
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.4
OS Platform: Linux 4.4
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36

但我不明白我错过NewsPage宣言的确切位置。

这是我的home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding> 
<ion-list>
    <h2 class="center">mY FIRST List</h2> 
    <ion-list> 
    <news-headline *ngFor="let notice of newsList" [news]="notice"> 
    </news-headline> 
</ion-list> 
</ion-list>
</ion-content>

这是我的app.modules.ts

import { NgModule, ErrorHandler } from '@angular/core';
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 { TabsPage } from '../pages/tabs/tabs';

import {NewsHeadline} from '../components/news/newsHeadline';

@NgModule({
    declarations: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage,
        NewsHeadline
    ],
    imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        AboutPage,
        ContactPage,
        HomePage,
        TabsPage
    ],
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

export class AppModule {}

虽然news-page.ts只包含以下代码：

import { Component } from '@angular/core'; 
import { NavParams } from 'ionic-angular'; 
import {News} from '../../components/news/news'; 

@Component({ 
    selector: 'page-news-page',
    templateUrl: 'news-page.html'
}) 
export class NewsPage {
    news: News;

    constructor(navParams: NavParams) {
        this.news = navParams.data;
    }
}

因此，问题的核心在于我的newsHeadline.ts文件，其中包含以下代码：

import {Component, Input} from '@angular/core'; 
import {News} from './news'; 
import {NewsPage} from '../../pages/news-page/news-page';  
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'news-headline', 
    template: ` 
<ion-item> 
    <ion-thumbnail item-left> 
      <img src="{{news.imagePreviewUrl}}"> 
    </ion-thumbnail> 
    <h2>{{news.title}}</h2> 
    <p>{{news.date | date: 'dd/MM/yyyy'}}</p>
    <button clear item-right (click)="goToNews(news)">Leggi</button>
</ion-item>` 
}) 
export class NewsHeadline { 
    @Input() 
    news: News; 
    constructor(public navCtrl: NavController) {}    

    goToNews(news: News) { 
        this.navCtrl.push(NewsPage, news); 
    } 
}

Answer 1

您需要将NewsPage添加到声明和entryComponents。您需要对您创建的每个新页面执行此操作。

更新

What is difference between declarations, providers and import in NgModule

Ionic2：无法打开下一页：找不到组件工厂

1 个答案: