コールバックをAngular2/Typescriptでこれを参照して渡します。

Question

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) 

：

@Component({ 
    moduleId: module.id, 
    selector: "app-auth-login", 
    templateUrl: "/app/components/auth/login/auth-login.component.html" 
}) 
export class AuthLoginComponent implements OnInit { 
    username : ""; 
    password : ""; 

    constructor(
     private authLoginService: AuthLoginService, 
     private router: Router 
    ) {} 

    ngOnInit(): void { 
    } 

    success(value: Response) : void { 
     console.log("Success", value); 
     this.router.navigate(["/home"]); 
    } 

    failure(value: Response) : void { 
     console.log("Failure", value); 
    } 

    login() : void { 
     this.authLoginService.login(
      this.username, 
      this.password, 
      this.success, 
      this.failure 
     ) 
    } 
} 

私はthisとsuccessを渡した後、呼び出し試してみましたt[success]()がサービスに含まれていますが、これはまったく同じエラーを生成します。

私のサービスは、回路ブレーカーパターンでクライアント側のロードバランサを実装しています。これが、コードをできるだけ再利用するために成功/失敗関数を渡す理由です。

サービスではrxjsをtoPromiseと使用しています。 httpService(...).toPromise().then(success).catch(response => {(circuit breaker pattern on some failures)})

Answer 1

あなたはそれ以外の場合は、コールバック内thisは、発信者を指すようになります、thisをバインドする必要があります。

login() : void { 
    this.authLoginService.login(
     this.username, 
     this.password, 
     this.success.bind(this), 
     this.failure.bind(this) 
    ) 
} 

別の方法は、設計によって、コールバックとして使用されるようになっている

login() : void { 
    this.authLoginService.login(
     this.username, 
     this.password, 
     (value) => this.success(value), 
     (value) => this.failure(value) 
    ) 
} 

Answer 2

方法は、その定義上のコンテキストにバインドすることができ、矢印機能を使用することです。この方法では、適切な文脈なしに誤ってパスされることはありません。

これは、矢印を用いて達成することができる。

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

またはコンストラクタ方法を結合することにより：

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

第二の方法は利点を有し、それはAuthLoginComponent.prototype.success AS /モック方法をスパイすることを可能にします。