美文网首页Ionic
No provider for NavController!

No provider for NavController!

作者: HustFox | 来源:发表于2016-05-27 16:20 被阅读3085次

    在使用ionic2编写hybrid应用时,在@App页面使用nav就可能会出现标题所示错误:

    import {App, Platform, NavController, Loading} from 'ionic-angular';
    import {StatusBar} from 'ionic-native';
    import {TabsPage} from './pages/tabs/tabs';
    
    
    @App({
      template: '<ion-nav [root]="rootPage"></ion-nav>',
      config: {} // http://ionicframework.com/docs/v2/api/config/Config/
    })
    export class MyApp {
      rootPage: any = TabsPage;
      constructor(platform: Platform, public nav:NavController) {
        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();
          this.presentLoadingDefault();
        });
      }
      presentLoadingDefault() {
      let loading = Loading.create({
        content: 'Please wait...'
      });
    
      this.nav.present(loading);
    
      setTimeout(() => {
        loading.dismiss();
      }, 5000);
      }
    }
    

    解决办法:
    首先,在文件头中,import {ViewChild} from '@angular/core';
    早期版本可能是import {ViewChild} from 'angular2/core.js';
    第二,在template或templateUrl内的"ion-nav"标签中,新建局部变量,如#nav
    第三,在类中创建成员变量:@ViewChild('nav') nav;
    接下来就可以正常使用nav来调用一些功能了,比如:this.nav.present(loading)
    全部代码如下:

    import {App, Platform, NavController, Loading} from 'ionic-angular';
    import {StatusBar} from 'ionic-native';
    import {TabsPage} from './pages/tabs/tabs';
    import {ViewChild} from '@angular/core';
    
    @App({
      template: '<ion-nav [root]="rootPage" #nav></ion-nav>',
      config: {} // http://ionicframework.com/docs/v2/api/config/Config/
    })
    export class MyApp {
      rootPage: any = TabsPage;
      @ViewChild('nav') nav;
      
      constructor(platform: Platform) {
        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();
          this.presentLoadingDefault();
        });
      }
      presentLoadingDefault() {
      let loading = Loading.create({
        content: 'Please wait...'
      });
    
      this.nav.present(loading);
    
      setTimeout(() => {
        loading.dismiss();
      }, 5000);
      }
    }
    

    参考https://github.com/driftyco/ionic/issues/5543

    相关文章

      网友评论

        本文标题: No provider for NavController!

        本文链接:https://www.haomeiwen.com/subject/abrplttx.html