如何使用Ionic生成的页面作为应用程序根页面

Question

我只是想用Ionic和Angular来弄湿我的脚。我用ionic start tabs-app tabs --ts创建了一个Ionic应用程序。然后我创建了一个ionic g page event-home页面。

接下来，我想将生成的页面设置为我的主页，因此，在不更改任何其他内容的情况下，我将app.component.ts更新为

...
import { EventHomePage } from '../pages/event-home/event-home';
...
export Class MyApp {
    rootPage:any = EventHomePage;
}

现在，如果我尝试ionic serve：Error: Uncaught (in promise): Error: No component factory found for EventHomePage. Did you add it to @NgModule.entryComponents?

所以，我尝试将它添加到app.module.ts中的entryComponents：

...
import { EventHomePage } from '../pages/event-home/event-home';
...
@NgModule({
  ...
  entryComponents: [
    EventHomePage,
    ...
  ]
})
export class AppModule{}

现在我得到Component EventHomePage is not part of any NgModule or the module has not been imported into your module.

所以，试图做一个看似简单的任务的事情证明是非常困难的。

如何将离子生成的应用程序的主页更改为由离子生成的页面？

Answer 1

如果您使用最新版本的ionic-cli生成页面，则页面将使用@IonicPage装饰器创建。如果是这样，您还必须在与event-home.module.ts文件相同的文件夹中包含event-home.ts文件。

使用该表示法，您不必在app.component.ts中导入页面组件，但是您将页面称为字符串：

rootPage:any = 'EventHomePage';

见http://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/和http://blog.ionicframework.com/ionic-and-lazy-loading-pt-2/

Answer 2

您还必须导入定义了EventHomePage的模块，或者您必须在app.module.ts的声明中添加EventHomePage。

Answer 3

@NgModule({   
 declarations:[
    EventHomePage
    ],
entryComponents:[
    EventHomePage
]})

添加一个声明，它应该工作。