爱奥尼亚2：Facebook登录->；错误：NavController中没有提供程序（TypeScript）

我一直在为我的爱奥尼亚2应用程序进行facebook登录 （使用本教程：）

但现在我发现了一个奇怪的错误：

0:0中的运行时错误，原因是：没有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();
        });
    }
}

欢迎光临

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

---

无法在

app.component.ts

或根应用程序页面中导入NavController

选项1:

尝试使用

ViewChild

为

根导航提供元素id

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

选项2:

从app.component.ts代码中，如果html模板仅包含

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

---

旁注：最好使用

（）=>{}

箭头函数进行回调，而不是将上下文保存在第二个变量中。

感谢您的回复，但错误仍然存在。我从'@angular/core'添加了import{ViewChild}；rootPage:any=WelcomePage@ViewChild（'navRoot'）navCtrl:NavController；为了welcome.ts和changed，您是否从构造函数参数中删除了navcontroller？是的，但是代码的其余部分不再工作。我应该把我以前在app.components.ts中的代码放在哪里？你是说第二个选项吗？看起来像是输入错误：

NativeStorage:NativeStorage

更改变量名。。您已将其设置为类名

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

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