如何在Meter.call（）方法中訪問Angular 2路由器

Question

我正在設計一個使用Angular2-Meteor的簡單登錄屏幕，一旦登錄API調用成功，我想將用戶重定向到/儀表板。

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參考Meteor.call做self = this，但它需要self作爲Window。

有人可以幫忙嗎？ 預先感謝您。

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