2017-02-22 10 views
0

私はIonicを初めて使い、新しいプロジェクトを開始しました。一番下の3つのタブでテンプレートを選択しましたが、今度は新しいスタートページが必要です。 LoginPageというページを作成しましたが、LoginPageのTabsPageを交換しようとすると、空の画面が表示されます。あなたが必要とする他のファイルがある場合はここで は、ファイルがIonic 2 rootPageが表示されない

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 {} 

です見て、ちょうど言って、私はそれらを追加します。 アドベンチャーに感謝します。イオンCLI

$ ionic g page login 

を使用してログインページを追加

+0

を述べたようにapp.component.tsを編集しますか? –

+0

私はtabspageを設定していませんでした。現時点ではloginpageを使用しています –

+0

ブラウザコンソールに何かエラーがありますか? –

答えて

1

てみその後app.module.tsにページを追加し、あなたがtabspageを設定していて、コンポーネントを追加することができます

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(); 
    }); 
    } 
} 
+0

それは私のために働いた!どうもありがとうございました! –

関連する問題