angular - Ionic 2：例外：没有 NavController 的提供者

Question

我的 ionic 2/angular 2 应用程序有问题。

我有一个 app.ts，其中孔“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

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

score 20 · Accepted Answer

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

所以，基本上你可以not做如下的事情： -

constructor(private nav: NavController){
}

这就是注入 NavController 的方法

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

这就是 Ionic 文档要说的。

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

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

score 15 · Accepted Answer

你不能NavController在你的根组件中注入它，所以你应该从那部分代码中删除它。更多信息可以在这里找到。

请确保您的中已经有一个参考变量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
  }

  // ...
}

score 8 · Accepted Answer

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

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

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

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

Ionic 2 的旧行为在 Ionic 3 中已弃用：

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

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

无论使用哪种方法，您都不需要任何变量import或private变量即可。如果您在 a 中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);
    }
}

score 2 · Accepted Answer

我处理它：

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

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

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

答案取自这里：github问题

score 2 · Accepted Answer

2

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

于 2016-06-30T13:43:48.637 回答

score 1 · Accepted Answer

您错误地命名了您的导航；

this.nav.setRoot(page.component);

应该

this.navCtrl.setRoot(page.component);

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

import { NavController} from 'ionic-angular';

score 0 · Accepted Answer

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

@Injectable()
export class MyProviderService {

  constructor(private nav: NavController){
  }
}

我刚刚遇到了那个错误......
在删除了这个注入（并重构了代码）之后，它工作得很好。

angular - Ionic 2：例外：没有 NavController 的提供者

7 回答 7

Related

Reference