Question

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

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

RunTimeError错误：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();
        });
    }
}

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登录 - ＆gt;错误：NavController中没有提供程序（TypeScipt）

1 个答案: