Ionic 2: Facebook Login -> Error: No Provider in NavController (TypeScript)

Question

我一直在为我的 ionic 2 应用开发 facebook 登录（使用本教程：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 代码，如果您的 html 模板仅包含

，您实际上根本不需要导入 NavController

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

旁注：最好使用 ()=>{} 箭头函数进行回调，而不是将上下文保存在第二个变量中。

Ionic 2: Facebook Login -> Error: No Provider in NavController (TypeScript)

Ionic 2: Facebook Login -> Error: No Provider in NavController (TypeScript)

facebook

typescript

ionic2

facebook-apps