Как перейти в приложение Ionic 2

Question

Я пытаюсь сделать небольшое приложение в Ionic 2, но мне не удается перейти ... Я прочитал документацию, навигационную информацию, navController, некоторое сообщение в StackOverflow ... Я пытался часами, но я застрял! У меня было несколько вопросов.

Мне нужно было найти способ использовать navController в моем приложении. Я сделал это благодаря @viewChild и StackOF. Я не совсем понимаю принцип. Я установил rootPage: any = Login;. Поскольку у меня есть меню в моем приложении, я отключил его на этой странице. На кнопке (click) я установил корень this.nav.setRoot() с HomePage. Теперь из HomePage, в меню, я хочу перемещаться по некоторым страницам. Я застрял здесь. Я использовал метод (click)="openPage(Messagerie)". Первая проблема, параметр в openPage() не определен. Затем я попробовал метод [navPush]="pageMessagerie" и this.pageMessagerie = Messagerie;, следующий за документацией, но это не сработало, ничего не происходит. Итак, я попытался скопировать код в мою функцию openPage(): this.nav.push(Messagerie);. Здесь у меня снова есть другая проблема. В первый раз, когда я вызываю push(), страница, кажется, появляется и исчезает немедленно, возвращаясь на HomePage. Второй раз, когда я нажимаю, это работает. Я могу перейти на страницу Messagerie и вернуться на HomePage через кнопку «Назад» на навигационной панели.

Итак ... Вот я, застрял в навигации! Я не знаю, что делать. Вот мой код. Теперь

---

Update Ok неопределенного порядок. Но мой навигатор все еще действует странно. Когда я использую this.nav.push() на домашней странице, я получил этот рабочий процесс: Нажмите на Messagerie: откройте Messagerie и сразу же на главной странице. Щелкните по запросу: Откройте Messagerie, немедленно Спросите и оставайтесь там. Нажмите на кнопку возврата назад: Назад в Messagerie, обратно к Demandes и вернуться на главную страницу. Конечно, если я использую this.nav.setRoot() каждый раз, когда он работает, но я теряю принцип навигации.

---

App.html

<ion-menu [content]="content"> 
    <ion-toolbar> 
     <ion-title>Menu</ion-title> 
    </ion-toolbar> 
    <ion-content> 
     <ion-list> 
      <button ion-item menuToggle = "left"> 
       Mes informations 
      </button> 
      <button ion-item menuToggle = "left" (click)="openPage(Messagerie)"> 
       Ma messagerie 
      </button> 
      <button ion-item menuToggle = "left" (click)="openPage(Demandes)"> 
       Mes demandes 
      </button> 
     </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav id="nav" #content [root]="rootPage"></ion-nav> 

App.ts

import {Component, ViewChild} from '@angular/core'; 
import {Platform, ionicBootstrap, NavController} from 'ionic-angular'; 
import {StatusBar} from 'ionic-native'; 
import {HomePage} from './pages/home/home'; 
import {Messagerie} from './pages/messagerie/messagerie'; 
import {Demandes} from './pages/demandes/demandes'; 
import {Login}  from './pages/login/login'; 

@Component({ 
    templateUrl: 'build/app.html' 
}) 

export class MyApp { 

    @ViewChild('content') nav 

    rootPage: any = Login; 

    constructor(private platform: Platform) { 
     platform.ready().then(() => { 
      StatusBar.styleDefault(); 
     }); 
    } 

    openPage(page) { 
     console.log(page); 
     this.nav.push(page); 
    } 
} 

ionicBootstrap(MyApp); 

Login.ts (с setroot)

import {Component}  from '@angular/core'; 
import {NavController, MenuController} from 'ionic-angular'; 
import {FormBuilder, ControlGroup, Validators} from '@angular/common'; 
import {HomePage}  from '../home/home'; 

@Component({ 
    selector: 'mc-login', 
    templateUrl: 'build/pages/login/login.html' 
}) 
export class Login { 

    loginForm: ControlGroup; 

    loginChanged:  boolean = false; 
    motdepasseChanged: boolean = false; 
    submitAttempt:  boolean = false; 

    constructor(private nav: NavController, private formBuilder: FormBuilder, private menu: MenuController) { 
     this.menu.enable(false); 
     this.loginForm = formBuilder.group({ 
      login: ['', Validators.compose([Validators.maxLength(10), Validators.pattern('[a-zA-Z ]*'), Validators.required])], 
      motdepasse: ['', Validators.compose([Validators.maxLength(10), Validators.pattern('[a-zA-Z ]*'), Validators.required])] 
     }); 
    } 

    elementChanged(input) { 
     let field = input.inputControl.name; 
     this[field+"Changed"] = true; 
    } 

    logintoapp() { 
     this.submitAttempt = true; 

     if(this.loginForm.valid) { 
      this.logindatabase(); 
     } else { 
      console.log("Nope"); 
     }  
    } 

    logindatabase() { 
     this.nav.setRoot(HomePage); 
    } 
} 

Пропустить что-нибудь? Что я делаю не так ? Большое спасибо за вашу помощь!

Answer 1

Не могли бы вы попробовать следующее:

В приложении.Т.С., объявить нав следующий массив следующим образом:

@ViewChild(Nav) nav:Nav; 

browsePages:Array<{title:string, component:any}>; 

добавить в конструкторе (это просто нужно явно закрыть меню позже):

private menu: MenuController 

внутри вашего конструктора объявить ваши страницы вы хотите добавить в меню:

this.browsePages = [ 
     {title: 'Ma messagerie', component: Messagerie}, 
     {title: 'Mes demandes', component: Demandes} 
    ]; 

заменить кнопки "Ma messagerie" ЕТ "Mes demandes" в HTML, как следующие:

<button ion-item *ngFor="let p of browsePages" (click)="openPage(p)"> 
    {{p.title}} 
</button> 

, а затем, наконец, ваш метод openPage:

openPage(page) { 
    // close the menu when clicking a link from the menu 
    this.menu.close(); 
    // navigate to the new page if it is not the current page 
    this.nav.setRoot(page.component); 
} 

Это было для навигации в меню.

Теперь о навигации со страницы входа ... замените ваш setroot навигационным нажатием. Вообще говоря, за исключением случаев, когда вам действительно нужно установить корень, вы должны, я думаю, нажимать страницы в стеке для навигации, чтобы не установить корень снова. Поэтому в основном используйте push и pop на navcontroller для навигации.

*** UPDATE, чтобы перейти на следующую страницу и удаление текущий из истории

logindatabase() { 
    this.goToNextPageWithoutBack(HomePage); 
} 

private goToNextPageWithoutBack(page:any, params?:any) { 
    this.nav.push(page, params).then(() => { 
     this.removeCurrentViewFromHistory(); 
    }); 
} 

private removeCurrentViewFromHistory() { 
    const index = this.nav.getActive().index; 
    this.nav.remove(0, index); 
} 

**** UPDATE

А затем, чтобы отобразить меню переключения в вашем homepage.html добавить

<ion-header> 
<ion-navbar> 

<button menuToggle start> 
    <ion-icon name="ios-menu-outline"></ion-icon> 
</button> 

<ion-title>my-items</ion-title> 
</ion-navbar> 
</ion-header> 

Я попытался извлечь эти строки из своих рабочих кодов, надеюсь, что он вам поможет.

Answer 2

Вам необходимо установить переменные области видимости на фактические страницы. Прямо сейчас (click) = «openPage (Messagerie)» -> «Messagerie» передается в undefined. Вам нужно установить this.Messagerie = Messagerie в свой компонент.