Ionic 2 rootPage不顯示

Question

我是Ionic的新手，剛開始一個新項目。我選擇了底部有3個標籤的模板，但現在我想要一個新的首頁。 我創建了一個名爲LoginPage的頁面，但是當我嘗試爲LoginPage交換TabsPage時，它僅顯示一個空白屏幕。 以下是文件

app.component.ts

import { Component } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 
import { LoginPage } from '../pages/login/login'; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage = LoginPage; 

    constructor(platform: Platform) { 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 
} 

login.ts

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

@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 

    constructor(public navCtrl: NavController) { 

    } 

} 

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { SettingsPage } from '../pages/settings/settings'; 
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home'; 
import { TabsPage } from '../pages/tabs/tabs'; 
import {LoginPage} from "../pages/login/login"; 

@NgModule({ 
    declarations: [ 
    MyApp, 
     SettingsPage, 
     ContactPage, 
     HomePage, 
     TabsPage, 
     LoginPage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
     SettingsPage, 
     ContactPage, 
     HomePage, 
     TabsPage, 
     LoginPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] 
}) 
export class AppModule {} 

如果有需要的其他文件看，只要這麼說，我會添加它們。 感謝您的參與。

Answer 1

嘗試增加使用離子CLI

$ ionic g page login 

然後在app.module.ts添加頁面，編輯app.component.ts登錄頁面就像你提到的

import { Component } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 

import { LoginPage } from '../pages/login/login'; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage = LoginPage; 

    constructor(platform: Platform) { 
    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 
}