Question

他们刚刚更新了Ionic 2以使用Angular 2 RC1，这很棒，除了路由对我来说仍然有点奇怪。我试图按照更新指南进行操作，但我的导航仍未在此处定义。旧的getComponent方法有效，但是他们通过此更新摆脱了这种方法。它适用于组件或页面，但不适用于服务。

错误我得到的是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

使用getActiveNav()。

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

Answer 2

如果此组件是根组件，意味着它是应用程序其余部分进入的初始组件，那么<ion-nav>将是根组件模板的ViewChild。你可以像上面那样使用它。

但是，根组件之后的所有其他组件都加载到<ion-nav>中，NavController具有<ion-nav>，可以将<ion-nav>注入到根NavController中加载的任何组件中。因此，在这种情况下，您的标题可能正在NavController内“加载”，因此它可以注入其父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); } }。

如果不确切知道您的应用和模板是如何设置的，我猜您应该尝试像这样注入var options = { ..., history: false, ... };：

var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

Answer 3

在使用打字稿的Ionic Beta 11中，它也可以是这样的：

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);

这样做：

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

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

然后像以前一样继续使用：

this.nav.setRoot(MyPage);

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

在Ionic 2 Beta中通过ViewChild导航

3 个答案: