Question

我在Angular2的某个组件中遇到了问题，其中＆＃39;这个＆＃39;在我的一个组件中绑定了错误的上下文。我有其他组件没有发生这个问题，但我看不出有什么区别。这是我的代码：

组件：

import { Component, Input } from '@angular/core';
import { FilesService } from "./services/files.service";

@Component({
    selector: 'my-app',
    moduleId: module.id,
    templateUrl:'/app/views/app.html'
})

export class AppComponent {
    openFileUploader: boolean = false;
    fileUploaderScope:any;

    constructor (
        private _filesService: FilesService
    ) {
        let self = this;
        _filesService.emitter.subscribe(
            (response) => {
                this.fileUploaderScope = response.filters;
                this.openFileUploader = response.open;
            },
            () => {

            },
            () => {

            }
        )
    }
}

在我的构造函数中，你可以看到我是依赖注入filesService然后订阅一个Event Emitter，它是在构造函数本身内使用＆＃39; subscribe＆＃39;从这个服务返回的。功能。从以下几行可以看出，我正在观察事件，在回调函数中，我将响应映射到一些局部组件变量：

_filesService.emitter.subscribe(
            (response) => {
                this.fileUploaderScope = response.filters;
                this.openFileUploader = response.open;
            },

这里唯一的问题是＆＃39;这个＆＃39;不受正确背景的约束。当我在订阅功能中添加断点时，它会说＆＃39;这个＆＃39;没有定义。我正在使用Typescript（ECMA6功能），因此箭头函数具有lexical这个绑定，并在构造函数的上下文中定义，因此＆＃39;这个＆＃39;应该绑定到组件？正如我所说，我有其他具有相同功能的组件，这些组件没有任何问题。因此我很困惑为什么会发生这种情况。谁能找到我出错的地方？

由于

Answer 1

我没有看到导致代码出现问题的模式，但通常是由

引起的

() => { ... }

而不是

     _filesService.emitter.subscribe(
        (response) => {
            this.fileUploaderScope = response.filters;
            this.openFileUploader = response.open;
        },
        errorHandler,
        onCompleteHandler
     }

或当函数传递时

     _filesService.emitter.subscribe(
        (response) => {
            this.fileUploaderScope = response.filters;
            this.openFileUploader = response.open;
        },
        errorHandler.bind(this),
        onCompleteHandler.bind(this)
     }

而不是

     _filesService.emitter.subscribe(
        (response) => {
            this.fileUploaderScope = response.filters;
            this.openFileUploader = response.open;
        },
        (error) => errorHandler(error),
        () => onCompleteHandler()
     }

或

HIDLibrary.HidDevice[] HidDeviceList;
HidDevice HidDevice;

// Enumerate the devices with the Vendor Id
// and Product Id of the IT4600
HidDeviceList = HidDevices.Enumerate(VID, PID);

＆＃39;这＆＃39;绑定到订阅函数而不是Angular2中的外部组件范围

1 个答案: