Navigieren durch ViewChild in Ionic 2 Beta

Question

Sie haben gerade Ionic 2 aktualisiert, um Angular 2 RC1 zu verwenden, was großartig ist, außer dass das Routing für mich immer noch etwas seltsam ist. Ich habe versucht, mit dem Update-Handbuch zu folgen, aber mein Nav ist hier noch undefiniert. Die alte getComponent-Methode hat funktioniert, aber sie wurden mit diesem Update beseitigt. Es funktioniert innerhalb einer Komponente oder einer Seite, aber nicht innerhalb eines Dienstes.

Fehler Ich erhalte ist No provider for NavController!

import {IonicApp, NavController, Nav} from 'ionic-angular'; 
import {Injectable, ViewChild} from '@angular/core'; 
import {Http, HTTP_PROVIDERS, Headers} from '@angular/http'; 
import {HomePage} from '../pages/home/home'; 

@Injectable() 
export class User { 
    isLoggedIn: boolean = false; 
    username: string = 'jaruesink'; 
    constructor (public nav: NavController) { 
    } 
    login(username) { 
    this.isLoggedIn = true; 
    this.username = username; 
    this.nav.push(HomePage); 
    } 
    logout() { 
    this.isLoggedIn = false; 
    } 
} 

Answer 1

Wenn diese Komponente die Wurzelkomponente ist, was bedeutet, dass es die ursprüngliche Komponente, die der Rest der App in geht, dann wäre die <ion-nav>ViewChild der sein Vorlage der Stammkomponente. Sie würden es genauso verwenden, wie Sie es oben haben.

Alle anderen Komponenten nach der Root-Komponente wird jedoch innerhalb der geladen, die eine NavController, die in jede Komponente, die in den Stamm <ion-nav> geladen wurde injiziert werden kann. So wird Ihre Kopfzeile in diesem Fall wahrscheinlich "innerhalb" einer <ion-nav> geladen, daher ist es in der Lage, seine Eltern NavController zu injizieren.

Ohne genau zu wissen, wie Sie Ihre App und Vorlagen Setup sind, ist meine Vermutung Sie dies die NavController wie Injektion versuchen sollte:

import {NavController} from 'ionic-angular'; 
import {Component, ViewChild} from '@angular/core'; 
import {User} from '../../services/user'; 
import {HeaderServices} from '../../services/header'; 
import {LoginPage} from '../../pages/login/login'; 

@Component({ 
    templateUrl: 'build/components/header/header.html', 
    selector: 'app-header' 
}) 
export class AppHeader { 

    constructor(public nav: NavController, public user: User, private header: HeaderServices) { 
    } 
    showLogin() { 
    this.nav.push(LoginPage); 
    } 
} 

Answer 2

In Ionic Beta 11 mit Typoskript, es auch so gehen könnte:

import {Component, ViewChild} from '@angular/core'; 
import {Platform, ionicBootstrap, MenuController, NavController} from 'ionic-angular'; 
import {StatusBar} from 'ionic-native'; 
import {AboutPage} from './pages/about/about'; 

@Component({ 
    templateUrl: 'build/app.html', 
    providers: [NavController], 
}) 

export class MyApp { 
    @ViewChild('nav') nav : NavController; 
    private pages: any[]; 
    constructor(private platform: Platform, private menu: MenuController) { 
    this.rootPage = TabsPage; 
    this.menu = menu; 

    this.pages = [ 
     { title: 'About', component: AboutPage } 
    ]; 

    platform.ready().then(() => { 
     StatusBar.styleDefault(); 
    }); 
    } 

    openPage(page) { 
    this.menu.close() 
    this.nav.push(page.component); 
    }; 
} 

ionicBootstrap(MyApp); 

---

Genau dies tun:

import {ViewChild} from '@angular/core'; 

@App({ 
    templateUrl: '....', 
    providers: [....], 
    // this is the point 
    queries: { 
    nav: new ViewChild('content') 
    } 
}) 

gehen Sie vor

dann zu verwenden, wie Sie es vorher:

this.nav.setRoot(MyPage); 

Quelle: https://github.com/driftyco/ionic-conference-app/blob/master/app/app.js#L24-L26

Answer 3

Verwendung getActiveNav().

import {App} from 'ionic-angular'; 
... 
constructor(private app: App) {} 
... 
let nav = this.app.getActiveNav(); 
nav.push(LoginPage);