0

我对 ionic / angular / typescript 和 cloudboost 还是很陌生，我正在努力让这一切一起工作。

我已经启动了一个具有“超级”入门主题的新离子项目。

我已经设法为 cloudboost logIn 功能工作，但我面临一些问题：

  • 我没有成功使用用户提供程序，因为它正在使用 Http 服务，并且 Cloudboost 没有提供对 url 的访问权限，并且原始返回是可观察的。

  • 我无法this在 CBUser.logIn 的回调函数中访问，它是未定义的。我用胖箭头尝试了几种方法，但没有奏效，所以目前，我用这个解决方法进行了管理：

    var falseThis = this;

我怎样才能使它更干净打字稿？

这是我的 login.ts 文件：

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ModalController, IonicPage, NavController, ToastController } from 'ionic-angular';

import * as CB from 'cloudboost';
import { User } from '../../providers/providers';
import { MainPage } from '../pages';

import { ModalCguPage } from './modal-cgu';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})



export class LoginPage {
  // The account fields for the login form.
  // If you're using the username field with or without email, make
  // sure to add it to the type
  account: { username: string, password: string } = {
    username: 'defaultuser@defaultsite.co',
    password: '01231234'
  };

  // Our translated text strings
  private loginErrorString: string;
  private loginSuccessString: string;
  private redirectPageSuccess : any = MainPage;

  constructor(public navCtrl: NavController,
    public user: User,
    public toastCtrl: ToastController,
    public translateService: TranslateService,
    public modalCtrl: ModalController) {
    this.translateService.get('LOGIN_ERROR').subscribe((value) => {
      this.loginErrorString = value;
    })
    this.translateService.get('LOGIN_SUCCESS').subscribe((value) => {
      this.loginSuccessString = value;
    })



  }

  // Attempt to login in through our User service
  doLogin() {  
//  HERE : get back the main this to use it later
    var falseThis = this;

//  cloudboost login
    let CBUser = new CB.CloudUser();
    CBUser.set('username', this.account.username);
    CBUser.set('password', this.account.password);
    CBUser.logIn({
        success: function(user) {
            let toast = falseThis.toastCtrl.create({
              message: falseThis.loginSuccessString + ' ' + user.username,
              duration: 3000,
              position: 'top'
            });
            toast.present();

            falseThis.navCtrl.push(MainPage);
        }, error: function(error)  {
    //    error: function(error) {
            // Unable to log in
            let toast = falseThis.toastCtrl.create({
              message: falseThis.loginErrorString,
              duration: 3000,
              position: 'top'
            });
            toast.present();
        }

    });
  }
}

在入门模板中包含的原始功能下方：

// Attempt to login in through our User service
  doLogin() {
    this.user.login(this.account).subscribe((resp) => {
      this.navCtrl.push(MainPage);
    }, (err) => {
      this.navCtrl.push(MainPage);
      // Unable to log in
      let toast = this.toastCtrl.create({
        message: this.loginErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }

如果有人可以清除事物，我将不胜感激。谢谢

编辑工作解决方案：

在 login.ts

// Attempt to login in through our User service
  doLogin() {
    this.user.login(this.account).then( (user:any) => {
        console.log('user displayed ');
        console.log(user.username);

    //  login successful
        let toast = this.toastCtrl.create({
          message: this.loginSuccessString + user.username,
          duration: 3000,
          position: 'top'
        });
        toast.present();

        this.navCtrl.push(MainPage);
    }).catch( err => {
    // Unable to log in
      let toast = this.toastCtrl.create({
        message: this.loginErrorString,
        duration: 3000,
        position: 'top'
      });
      toast.present();
    });
  }

在 user.ts 中：

login(account: any) {
         let CBUser = new CB.CloudUser();
         CBUser.set('username', account.username);
         CBUser.set('password', account.password);
         return new Promise((resolve, reject) =>{
             CBUser.logIn({
                 success: (user) => {
                 //Login successful
                     resolve(user)
                 },
                 error: (error) => {
                     reject(error)
                 //Error in user login.
                 }
             });
         });
     }
4

2 回答 2

1

我无法在 CBUser.logIn 的回调函数中访问它，它是未定义的。我用胖箭头尝试了几种方法，但没有奏效，所以目前，我用这个解决方法进行了管理

我认为佩斯回答了这个问题。当我遇到这个问题箭头函数时，这个链接帮助了我。

对于 CloudBoost 回调，请使用：

{
  success: (obj) => {
    //success
  },
  error: (err) => {
    //Error
  }
}

我没有成功使用用户提供程序，因为它正在使用 Http 服务，并且 Cloudboost 没有提供对 url 的访问权限，并且原始返回是可观察的。

用户提供者只是启动 Http 请求的一个示例。要将用户提供程序与 cloudboost 一起使用，我建议将登录功能更改为类似

login(account) {
let CBUser = new CB.CloudUser();
CBUser.set('username', account.username);
CBUser.set('password', account.password);
return new Promise((resolve, reject) =>{
  CBUser.logIn({
    success: (user) => {
      //Login successful
      resolve(user)
    },
    error: (error) => {
      reject(error)
      //Error in user login.
    }
  })
 })
}

并使用以下方法调用该函数：

this.user.login(this.account).then( user => {
  //login successful
  this.navCtrl.push(MainPage);
}).catch( err => {
  this.navCtrl.push(MainPage);
  // Unable to log in
  let toast = this.toastCtrl.create({
    message: this.loginErrorString,
    duration: 3000,
    position: 'top'
  });
  toast.present();
});
于 2018-01-03T17:27:48.973 回答
0

该示例使用箭头 lambdas，它更改了this. 查看这篇文章了解详情。

success: function(user) {
  //this not accessible
}

success: user => {
  //this is accessible
}
于 2018-01-03T16:49:54.953 回答