在Angular2/Typescript中引用此

在Angular2中传递实例方法

在以下代码中从模板调用

login（）

时，我遇到此错误：

Failure TypeError: Cannot read property 'router' of null
    at AuthLoginComponent.success (auth-login.component.ts:30)
    at ZoneDelegate.invoke (zone.js:242)
    at Object.onInvoke (core.umd.js:4391)
    at ZoneDelegate.invoke (zone.js:241)
    at Zone.run (zone.js:113)
    at zone.js:520
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (core.umd.js:4382)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at drainMicroTaskQueue (zone.js:418)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:349)

在以下代码中：

我尝试传递

this

和

success

，然后在服务中调用

t[success]（）

，但这会产生完全相同的错误

我的服务使用断路器模式实现客户端“负载平衡器”，这就是我传递成功/失败函数以尽可能重用代码的原因

该服务正在将

rxjs

与

toPromise

一起使用，例如：。

---

httpService（…）.toPromise（）.then（success）.catch（response=>{（某些故障的断路器模式）}）

您需要绑定

此
，否则回调中的
此
将指向调用方

login（）：void{
this.authLoginService.login(
这个.username，
这个密码，
这个.成功.束缚（这个），
this.failure.bind（this）
)
}

另一种方法是使用箭头函数

login（）：void{
this.authLoginService.login(
这个.username，
这个密码，
（值）=>this.success（值），
（值）=>this.failure（值）
)
}
设计中应该用作回调的方法可以绑定到其定义上的上下文。这样，它们就不可能在没有适当上下文的情况下被意外传递

这可以通过箭头来实现：

success = (value: Response) : void => { ... }

或者通过在构造函数中绑定方法：

constructor(...) {
  this.success = this.success.bind(this);
  ...
}

第二种方法有一个优点，它允许将spy/mock方法作为
AuthLoginComponent.prototype.success
您需要传递
res=>this.success（res）
constructor(...) {
  this.success = this.success.bind(this);
  ...
}