2017-11-10 20 views
-1

こんにちは私は、有効なユーザー名とパスワードが入力されたときに、タブコントローラーの一部であるイベントページにユーザーをリダイレクトするこれは、ユーザーがアプリにロージュたときにどのように見えるかです:enter image description here私のアプリにログインした後にIonicタブが表示されない

は、ここでのログインpage.htmlのための私のコードされています

<ion-content padding id="page6"> 
    <img src="assets/img/pDQnyrguQAqrcKYvyqqa_web_hi_res_512.png" style="display:block;width:60%;height:auto;margin-left:auto;margin-right:auto;" /> 
    <form id="login-form3"> 
    <ion-card id="login-card24"> 
     <ion-list> 
     <ion-list id="login-list2"> 
      <ion-item id="login-input1"> 
      <ion-label> 
       Email 
      </ion-label> 
      <ion-input type="email" [(ngModel)]="user.email" [ngModelOptions]="{standalone: true}"></ion-input> 
      </ion-item> 
      <ion-item id="login-input2"> 
      <ion-label> 
       Password 
      </ion-label> 
      <ion-input type="password" [(ngModel)]="user.password" [ngModelOptions]="{standalone: true}" ></ion-input> 
      </ion-item> 
     </ion-list> 
     </ion-list> 
    </ion-card> 
    <div class="spacer" style="height:40px;" id="login-spacer1"></div> 
    <button id="login-button1" ion-button (click)="login(user)" color="dark" block> 
     Log in 
    </button> 
    <button id="login-button2" ion-button clear color="positive" block on-click="goToSignup()"> 
     Or create an account 
    </button> 
    </form> 
</ion-content> 

はここlogin.tsコードです:

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { SignupPage } from '../signup/signup'; 
import { User } from "../../app/models/user"; 
import{AngularFireAuth} from 'angularfire2/auth'; 
import { EventsPage } from '../events/events'; 
@Component({ 
    selector: 'page-login', 
    templateUrl: 'login.html' 
}) 
export class LoginPage { 

    user = {} as User; 

    constructor(private afAuth: AngularFireAuth, 

     public navCtrl: NavController) { 
    } 

    async login(user: User) { 
     try { 
      const result = this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password) 
      this.navCtrl.setRoot(EventsPage); 


     } 

     catch (e) { 

      console.error(e); 
     } 
    } 

    goToSignup(params){ 
    if (!params) params = {}; 
    this.navCtrl.push(SignupPage); 
    } 
} 

とevents.htmlページ:

<ion-header> 
    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title> 
     Events 
    </ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding id="page3"> 
    <ion-card id="events-card26"> 
    <ion-list> 
     <form id="events-form6"> 
     <ion-searchbar placeholder="" name="" id="events-search3"></ion-searchbar> 
     </form> 
    </ion-list> 
    </ion-card> 
</ion-content> 

、最終的にevents.tsコード:

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

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

    constructor(public navCtrl: NavController) { 
    } 



} 

ので、私は事前に謝罪、私はその最も可能性の高い簡単な修正を知っているが、私は、イオンへの新たなんですどんな助けも素晴らしいだろう!

ありがとうございます! :)

+0

? –

答えて

1

「EventsPage.ts」からタブページを呼び出す必要があります。 'setRoot'オプションを使用して呼び出します。 例:

this.navCtrl.setRoot(PageName); 

参考:..theはONW `イオンtabs`を持つタブ付きページでページ名>あなたのタブページクラス名

関連する問題