离子2：Facebook的登录 - >错误：NavController（TypeScipt）不提供

Question

我一直对Facebook登录我的离子2应用 （使用本教程：https://ionicthemes.com/tutorials/about/ionic2-facebook-login）

但现在我得到一个奇怪的错误：

RunTimeError Error in :0:0 caused by: No provider for NavController

app.component.ts：

import { Component } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 
import { StatusBar } from '@ionic-native/status-bar'; 
import { SplashScreen } from '@ionic-native/splash-screen'; 
import { NativeStorage } from '@ionic-native/native-storage'; 


import { TabsPage } from '../pages/tabs/tabs'; 
import { WelcomePage } from '../pages/welcome/welcome'; 
import { DetailPage } from '../pages/detail/detail'; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage: any = WelcomePage; 

    constructor(NativeStorage: NativeStorage, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { 
     platform.ready().then(() => { 
      // Here we will check if the user is already logged in 
      // because we don't want to ask users to log in each time they open the app 
      let env = this; 
      NativeStorage.getItem('user') 
       .then((data) => { 
        // user is previously logged and we have his data 
        // we will let him access the app 
        this.rootPage = DetailPage; 
        splashScreen.hide(); 
       }, (error) => { 
        //we don't have the user data so we will ask him to log in 
        this.rootPage = WelcomePage; 
        splashScreen.hide(); 
       }); 

      statusBar.styleDefault(); 
     }); 
    } 
} 

welcome.ts：

import { Component } from '@angular/core'; 
import { Facebook, NativeStorage } from 'ionic-native'; 
import { NavController } from 'ionic-angular'; 
import { DetailPage } from '../detail/detail'; 
import { ViewChild } from '@angular/core'; 

@Component({ 
    selector: 'page-welcome', 
    templateUrl: 'welcome.html' 
}) 
export class WelcomePage { 
    rootPage: any = WelcomePage; 
    @ViewChild('navRoot') navCtrl: NavController; 
    FB_APP_ID: number = 123456789; 

    constructor() { 
     Facebook.browserInit(this.FB_APP_ID, "v2.8"); 
    } 

    doFbLogin() { 
     let permissions = new Array(); 
     let nav = this.navCtrl; 
     //the permissions your facebook app needs from the user 
     permissions = ["public_profile"]; 


     Facebook.login(permissions) 
      .then(function (response) { 
       let userId = response.authResponse.userID; 
       let params = new Array(); 

       //Getting name and gender properties 
       Facebook.api("/me?fields=name,gender", params) 
        .then(function (user) { 
         user.picture = "https://graph.facebook.com/" + userId + "/picture?type=large"; 
         //now we have the users info, let's save it in the NativeStorage 
         NativeStorage.setItem('user', 
          { 
           name: user.name, 
           gender: user.gender, 
           picture: user.picture 
          }) 
          .then(function() { 
           nav.push(DetailPage); 
          }, function (error) { 
           console.log(error); 
          }) 
        }) 
      }, function (error) { 
       console.log(error); 
      }); 
    } 
} 

有谁知道如何解决这个问题的想法？ 非常感谢！

Answer 1

不能在app.component.ts或根应用页面导入NavController。

选项1：

设法得到它使用ViewChild

给元素ID root-nav

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

在组件：

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

@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage: any = WelcomePage; 
    @ViewChild('navRoot') navCtrl:NavController; 

    constructor(nativeStorage: NativeStorage, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { //remove navcontroller injected 
     platform.ready().then(() => { 
      // Here we will check if the user is already logged in 
      // because we don't want to ask users to log in each time they open the app 
      let env = this; 
      //... 

选项2：

从你app.component.ts代码，你实际上不需要进口NavController在所有如果你的HTML模板只包含，

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

所需的页面简单地设置rootPage。

nativeStorage.getItem('user') 
       .then((data) => { 
        // user is previously logged and we have his data 
        // we will let him access the app 
        this.rootPage = DetailPage; 
        splashScreen.hide(); 
       }, (error) => { 
        //we don't have the user data so we will ask him to log in 
        this.rootPage = WelcomePage; 
        splashScreen.hide(); 
       }); 

旁注：最好使用()=>{}箭头功能的回调，而不是在第二个变量保存环境。