Question

我的离子2 /角度2应用程序有问题。

我得到了一个应用程序，其中“auth”部分是实现的。

代码如下所示：

 import {Nav, Platform, Modal, ionicBootstrap} from "ionic-angular";
import {NavController} from "ionic-angular/index";
import {StatusBar} from "ionic-native";
import {Component, ViewChild} from "@angular/core";
import {AngularFire, FirebaseListObservable, FIREBASE_PROVIDERS, defaultFirebase} from "angularfire2";
import {HomePage} from "./pages/home/home";
import {AuthPage} from "./pages/auth/home/home";

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

class MyApp {
  @ViewChild(Nav) nav: Nav;

  authInfo: any;
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(private platform: Platform, private navCtrl: NavController, private af: AngularFire) {
    this.initializeApp();

    this.pages = [
      { title: "Home", component: HomePage }
    ];

  }

  initializeApp() {
    this.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();
    });
  }

  openPage(page) {
    this.nav.setRoot(page.component);
  }

  ngOnInit() {
    this.af.auth.subscribe(data => {
      if (data) {
        this.authInfo = data;
      } else {
        this.authInfo = null;
        this.showLoginModal();
      }
    });
  }

  logout() {
    if (this.authInfo) {
      this.af.auth.logout();
      return;
    }
  }

  showLoginModal() {
    let loginPage = Modal.create(AuthPage);
    this.navCtrl.present(loginPage);
  }
}

但现在，当我尝试运行应用程序时，我收到此消息：

ORIGINAL EXCEPTION: No provider for NavController

你知道如何解决这个问题吗？谢谢！

Answer 1

您无法通过构造函数在Root组件中注入NavController。

所以，基本上你可以not执行以下操作： -

constructor(private nav: NavController){
}

这是注入NavController的方法

@Controller({
  ....
})
class MyApp{
  @ViewChild('nav') nav: NavController;
  ....
  ....
  constructor(...){ // See, no NavController here
  }
  ....
}

这就是Ionic docs所说的。

如果您想从根应用程序组件控制导航，该怎么办？您无法注入NavController，因为任何作为导航控制器的组件都是根组件的子组件，因此它们无法注入。

通过向ion-nav添加引用变量，您可以使用@ViewChild获取Nav组件的实例，这是一个导航控制器（它扩展了NavController）

Answer 2

您无法在根组件中注入NavController，因此您应该从代码的该部分中删除它。更多信息可以在 here 找到。

请确保您的ion-nav中已有一个参考变量，如下所示（#myNav)：

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

然后您可以使用ViewChild获取该引用。然后，您可以使用该属性导航到另一个页面：

import { Nav, Platform, ... } from "ionic-angular";
// more imports...
// ...

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

class MyApp {
  @ViewChild('myNav') nav: NavController // <--- Reference to the Nav

  authInfo: any;
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;

  // Remove the "navCtrl: NavController" from the constructor, since
  // now your getting the reference from the view
  constructor(private platform: Platform, private af: AngularFire) {
    this.initializeApp();

    this.pages = [
      { title: "Home", component: HomePage }
    ];

  }

  // ...

  openPage(page) {
    // this.navCtrl.setRoot(page.component); <-- Wrong!
    this.nav.setRoot(page.component) // <-- Right! Use the this.nav property
  }

  // ...
}

Answer 3

建议您在Ionic 3+中使用this.app.getActiveNavs()，因为getActiveNav（）将在下一个主要版本中删除，因此您的函数可以写成：

showLoginModal() {
    let loginPage = Modal.create(AuthPage);
    this.getActiveNavs().slice(-1)[0].present(loginPage);
}

要推送导航堆栈，您只需导入页面（例如YourPage），然后：

this.getActiveNavs()[0].push(YourPage);

旧的行为，对于Ionic 2，在Ionic 3中弃用：

您可以在Ionic 2（和Ionic 3）中使用this.getActiveNav()，因此您的功能可以写成：

showLoginModal() {
    let loginPage = Modal.create(AuthPage);
    this.getActiveNav().present(loginPage);
}

使用任何一种方法，您都不需要任何import或private变量来实现此功能。如果您在Component，请参阅App：

import {App} from 'ionic-angular';
import {MyPage} from '../pages/my/page';

@Component()
export class MyComponent {
    constructor(private app: App) {
    }
    goToMyPage() {
        this.app.getActiveNav().push(MyPage);
    }
}

Answer 4

好的，我只使用导航而不是NavigationController，现在它可以工作。

Answer 5

我用以下方式处理：

import { App, NavController } from 'ionic-angular';

constructor(protected app: App) {
... }

get navCtrl(): NavController {
    return this.app.getRootNav();
}

从这里回答：github issues

Answer 6

您错误地命名了导航;

this.nav.setRoot(page.component);

应该是

this.navCtrl.setRoot(page.component);

并仔细检查您是否正确导入

import { NavController} from 'ionic-angular';

Answer 7

此错误的一个原因是当您尝试将NavController注入提供程序类时像这样：

@Injectable()
export class MyProviderService {

  constructor(private nav: NavController){
  }
}

我刚才有这个错误...... 删除此注入（并重构代码）后，它工作正常。

Ionic 2：EXCEPTION：没有NavController的提供者

7 个答案: