変数を@注射可能からコンポーネントに渡す

Question

この段落の下のコードブロックでは、Twilio.Device.incomingが表示されます。this.connectionからconnに設定しています。私は、コンポーネントクラス持っているよりも

@Injectable() 
    export class BaMsgCenterService { 
     public getData; 
     public incomingCall = false; 
     public connection; 

     constructor(private http: Http) { 
      this.initTwilio(); 

      Twilio.Device.ready(function (device) { 
       self.incomingCall = true; 
       $(".card-title").text("Ready to receive incoming calls!"); 
      }); 

      Twilio.Device.incoming(function (conn) { 
       console.log(conn.status); 
       this.incomingCall = true; 
       this.connection = conn; 
      }); 
      //other functions 
     } 
    } 
} 

：HTMLコードで

import {Component} from '@angular/core'; 
import { Http } from '@angular/http'; 

import {BaMsgCenterService} from './baMsgCenter.service'; 

@Component({ 
    selector: 'ba-msg-center', 
    providers: [BaMsgCenterService], 
    styleUrls: ['./baMsgCenter.scss'], 
    templateUrl: './baMsgCenter.html' 
}) 
export class BaMsgCenter { 
    public connection; 

    constructor(private _baMsgCenterService:BaMsgCenterService) { 
     this.connection = this._baMsgCenterService.connection; 
    } 
    pickup() { 
     this.connection.accept(); 
    } 

} 

を私はしかし(click)="pickup()"

を持って、私はそれをクリックしたとき、それはconnが存在しないことを言います。

inline template:63:10 caused by: Cannot read property 'accept' of undefined

私はそのピックアップ機能の仕事をしたいと思い、そのピックアップ機能でCONN（またはthis.connection）を使用することができなければなりません。 Twilio.Deviceが後で実行されると思います（APIです）。

Answer 1

Twilio開発者のエバンジェリストはこちら。あなたは、コンストラクタでthis.connection = this_baMsgCenterService.connectionを設定すると

、あなたは単に同じ場所でthis.connectionthis._baMsgCenterService.connection is pointing, which is未定義at the time. When this._baMsgCenterService.connection is updated it doesn't change this.connection`を指している、一緒に2つの変数を抱き合わせされていません。ここで

は、その単純な例です：

var a, b; 
a = b = "foo"; 
b = "bar"; 
console.log(a); // "foo"; 
console.log(b); // "bar"; 

あなたがメッセージセンターサービスの接続に言及維持する必要があります。これは、プロパティではなくインスタンスメソッドで行うことができます。以下のような

何か：

export class BaMsgCenter { 
    constructor(private _baMsgCenterService:BaMsgCenterService) {} 

    pickup() { 
    this.connection().accept(); 
    } 

    connection() { 
    this._baMsgCenterService.connection; 
    } 
} 

は、それがすべてで助けなら、私に教えてください。

編集

私はまだ、私は半分の質問に答えたと思うが、イベントでthisの状況についての回答も同様に適切です。

Answer 2

使用

(conn) => { 

代わりの

function (conn) { 

も矢印functiinスタイルにfunctionの他のすべての出現箇所を変更、あなたが期待するようそうthis.は、サービスまたはcompinentクラスを指していません。

Answer 3

1つのエラーは、基本サービスがconnectionを遅延に設定していることです。コンストラクタ/初期化では、まだそこには存在しないため、undefinedに初期化されます。私はサービスにそれをあなたがそれを得るためにここに非同期操作を開始していると思いますし、コールバックの店で：

Twilio.Device.incoming(function (conn) { 
    console.log(conn.status); 
    this.incomingCall = true; 
    this.connection = conn; 
}); 

あなたが今する必要があるかもしれませんどのような接続が使用可能になるまでBaMsgCenterで待っています。例えば。接続があるときだけBasMsgCenterを作成します。または、基本サービスでそれをPromiseにするか、または可用性を通知する別の約束を追加することで、MsgCenterからこれを購読し、割り当てられた後にのみ接続を使用します。以前に接続が割り当てられたときにのみpickupが呼び出されることを保証できる場合は、それは必要ではありません。

GünterZöchbauerは、thisが実際にBaMsgCenterServiceクラスのインスタンスを指していないことを指摘しました。これは代わりに矢印関数を使用して修正できます。

Answer 4

thisが間違っています。 functionの構文を使用する場合、thisは呼び出しのターゲットに動的にバインドされます。つまり、メソッドとして使用されたときに関数が呼び出されたオブジェクトにバインドされています。あなたには2つの選択肢があります。閉鎖で使用するためのローカル変数を使用して

別名this：あなたはNodeJSや最近のブラウザの最近のバージョンをターゲットにしている場合

var that = this; 

takesAFunction(function (value) { 
    that.prop = value; 
}); 

、またはあなたがtranspilerへのアクセス権を持っている場合。 TypeScript、Babel、またはTraceurなど、言語内の他のすべての識別子と同様に、矢印の機能thisの内部

takesAFunction(value => { 
    this.prop = value; 
}); 

静的にスコープされ、またレキシカルスコープとして知られている：ちょうどES2015矢印関数を使用します。

第2のアプローチは、より明確なコードにつながり、利用可能な場合は優先されるべきです。