angular - 如何在 Meter.call() 方法中访问 Angular 2 路由器

Question

我正在使用 Angular2-Meteor 设计一个简单的登录屏幕，一旦登录 API 调用成功，我想将用户重定向到 /dashboard。

import {Component} from '@angular/core';
import {MeteorComponent} from 'angular2-meteor';
import {LocalStorageService} from '../services/localstorage.service'
import {Router} from '@angular/router-deprecated';
import {LoggerService} from "../services/loggerService";

'use strict';
@Component({
    selector: 'login',
    templateUrl: 'client/login/login.html',
    bindings: [LoggerService]
})

export class LoginComponent extends MeteorComponent {

public loginData = {
    username: '',
    password: ''
};

constructor(private _logger:LoggerService, public router:Router) {
    super();
}

login() {
    this._logger.log('Login attempted ', this.loginData);

    this.call('authenticateUser', this.loginData.username, this.loginData.password , function (err, data) {
        if (err) {
            this._logger.error(err);

        } else {

            console.info(JSON.parse(data));
            console.log(this.router);
            this.router.navigate(['Dashboard'])
        }
      });
    }
}

我无法访问 中的路由器Meteor.call()。我试过通过做传递this引用，但它需要as 。Meteor.callself = thisselfWindow

有人可以帮忙吗？先感谢您。

Answer 1

您必须使用箭头函数this在类中具有相同的上下文。

像这样更改您的匿名回调函数：

this.call('authenticateUser', 
          this.loginData.username, 
          this.loginData.password, 
          (err, data) => {
   //...
});

暗示

尝试查看promises或observables不使用回调函数

Answer 2

您可以将函数绑定到您的上下文，如下所示：

this.call('authenticateUser', this.loginData.username, this.loginData.password , function (err, data) {
    if (err) {
        this._logger.error(err);

    } else {

        console.info(JSON.parse(data));
        console.log(this.router);
        this.router.navigate(['Dashboard'])
    }
  }).bind(this);

或者你可以只使用箭头函数：

this.call('authenticateUser', this.loginData.username, this.loginData.password , (err, data) => {
    if (err) {
        this._logger.error(err);

    } else {
        console.info(JSON.parse(data));
        console.log(this.router);
        this.router.navigate(['Dashboard'])
    }
}).bind(this);