离子2根页未显示

Question

我是Ionic的新手，刚开始一个新项目。我在底部选择了3个选项卡的模板，但现在我想要一个新的启动页面。我创建了一个名为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();
    });
  }
}