Angular2 with Typescript - mqtt.jsでクライアントが見つかりません

Question

問題があります。私はtypescriptでangular2にmqtt.jsライブラリを実装しようとしています。ここに私のapp.component.tsです：

import { Component } from '@angular/core'; 
import * as mqtt from 'mqtt'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
private client: mqtt.Client; 
    ngOnInit(): void { 
    this.connectToMQTTBroker(); 
    } 
    public connectToMQTTBroker() { 
    console.log('trying to connect'); 
    this.client = mqtt.connect('ws://mqttBroker.de:1882'); 
    this.client.addListener('connect', this.on_connect); 
    this.client.addListener('message', this.on_message); 
    } 

    private on_connect() { 
    console.log('connected'); 
    this.client.subscribe('/broker/response/clientID'); 
    this.client.publish('/providers', '{...Message...}'); 
    } 

    private on_message (args: any[]) { 
    console.log(args[0]); 
    console.log(args[1]); 
    } 
} 

それは正常に接続され、私はログに「接続」というメッセージが表示さが、クライアント変数はon_connect方法でアクセスすることはできませんなぜ、私がCannot read property 'subscribe' of undefined

を取得？私はいくつかの基本的なTypescriptのものを紛失していると確信していますが、私は何が分かりません。

Answer 1

問題は、このバインディング（https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md）です。 あなたに実行している問題

this.client.addListener('connect', this.on_connect.bind(this)); 
this.client.addListener('message', this.on_message.bind(this); 

または

this.client.addListener('connect',() => {this.on_connect()}); 
this.client.addListener('message', (args) => {this.on_message(args)}); 

Answer 2

で

this.client.addListener('connect', this.on_connect); 
this.client.addListener('message', this.on_message); 

を置き換えることによって、試してみてくださいthisがあなたのon_connectメッセージの範囲内で変更されたことです。これは、コールバック関数で矢印表記を使用するかどうかを指定するときに、TypeScriptがthisの割り当てを処理する方法と関係しています。あなたの元の定義の活字体の矢印表記を使用しないことで

this.client.addListener('connect',() => this.on_connect()); 
this.client.addListener('message',() => this.on_message()); 

それはTranspilesのでon_connect機能の内部thisが参照するとき、あなたのための結合範囲を処理しません：あなたのコールバックのバインディング以下するを更新します関数そのもの。