Javascript 将变量从@Injectable传递到组件

在本段下方的代码块中，您可以看到

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
         }
    }
}

我有一个组件类：

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

}

在html代码中，我有一个

（单击）=“pickup（）”

但是，当我点击它时，它说conn不存在

内联模板：63:10原因：无法读取未定义的属性“accept”

---

我想使该拾取功能工作，它必须能够在该拾取功能中使用conn（或此.connection）。我认为Twilio.Device是稍后执行的（它是一个API）

这里是Twilio开发者福音传道者

当您在构造函数中设置

this.connection=this\u baMsgCenterService.connection

时，您没有将这两个变量绑定在一起，您只是将

this.connection

指向同一个位置

this.\u baMsgCenterService.connection指向，此时它是

未定义的

。当

this.\u baMsgCenterService.connection

更新时，它不会更改

this.connection`

下面是一个更简单的例子：

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.connection=this\u baMsgCenterService.connection
时，您没有将这两个变量绑定在一起，您只是将
this.connection
指向同一个位置
this.\u baMsgCenterService.connection指向，此时它是
未定义的
。当
this.\u baMsgCenterService.connection
更新时，它不会更改
this.connection`

下面是一个更简单的例子：

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

让我知道这是否有帮助

编辑

我仍然认为我回答了一半的问题，但是关于这次事件中
的上下文的答案也是正确的。
使用

(conn) => {

而不是

function (conn) {

同时将
函数
的所有其他出现项更改为箭头函数样式，否则
将不会像您预期的那样指向服务或Compencent类。
使用

(conn) => {

而不是

function (conn) {

同时将
函数
的所有其他出现更改为箭头function样式，否则
这将不会像您预期的那样指向服务或Compencent类。
一个错误是基本服务延迟设置
连接。在构造函数/初始化中，它还不存在，因此初始化为未定义。我猜您正在启动一个异步操作来获取它，并在回调中将其存储在服务中：

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

您现在可能需要在BaMsgCenter中等待，直到连接可用。例如，仅当存在连接时才创建BasMsgCenter。或者通过在基本服务中作出承诺，或者添加另一个表示可用性的承诺，从MsgCenter订阅此连接，并且仅在分配连接后使用连接。如果您可以保证只在以前分配连接时调用
拾取
，则无需这样做

另一个错误是，Günter Zöchbauer还指出，
这个
实际上并不指向您的
BaMsgCenterService
类的实例，它可以通过使用箭头函数来修复
 一个错误是基本服务延迟设置
连接。在构造函数/初始化中，它还不存在，因此初始化为未定义。我猜您正在启动一个异步操作来获取它，并在回调中将其存储在服务中：

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

您现在可能需要在BaMsgCenter中等待，直到连接可用。例如，仅当存在连接时才创建BasMsgCenter。或者通过在基本服务中作出承诺，或者添加另一个表示可用性的承诺，从MsgCenter订阅此连接，并且仅在分配连接后使用连接。如果您可以保证只在以前分配连接时调用
拾取
，则无需这样做

另一个错误是，Günter Zöchbauer还指出，
这个
实际上并不指向您的
BaMsgCenterService
类的实例，它可以通过使用箭头函数来修复
 您的
此
错误。当使用
函数
语法时，
此
动态绑定到调用的目标，也就是说，当用作方法时，它绑定到调用函数的对象。你有两个选择

别名
此
在闭包中使用局部变量：

var that = this;

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

如果您的目标是现代版本的NodeJS或现代浏览器，或者如果您可以访问transpiler；例如打字稿、巴别塔或Traceur；只需使用ES2015箭头功能：

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

在arrow函数的内部，这个
是静态作用域，也称为词汇作用域，就像语言中的其他标识符一样

第二种方法可以产生更清晰的代码，在可用的情况下应该优先考虑。
您的
错误。当使用
函数
语法时，
此
动态绑定到调用的目标，也就是说，当用作方法时，它绑定到调用函数的对象。你有两个选择

别名
此
在闭包中使用局部变量：

var that = this;

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

如果你