为什么我得到：TypeError：this.tenantQueryParamResolve 不是函数

Question

重现步骤

我有一个 Angular 2 TypeScript 服务，在 Angular 1 / Angular 2 混合环境中运行，旨在捕获 URL 参数（租户）并使用此参数设置组件属性。

需要此服务来弥补 $routeParams 或类似服务在此环境中不可用的事实。

服务有两种方法：

• setTenantQueryParam - 使用 $routeParams 服务从 Angular 1 控制器调用，并用于解析带有参数名称的承诺。
• getTenantQueryParam - 从请求参数值的 Angular 2 组件调用。它返回一个承诺，该承诺在上述 setTenantQueryParam 被调用时得到解决。

这是代码：

import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";

@Injectable()
export class MigrationHelperService {
    tenantQueryParam: string;
    tenantQueryParamResolve: (x: string) => void;

    setTenantQueryParam(tenant: string) {
        this.tenantQueryParam = tenant;
        this.tenantQueryParamResolve(tenant);
    }

    getTenantQueryParam(): Promise<string> {
        if (this.tenantQueryParam !== undefined) {
            return Promise.resolve(this.tenantQueryParam);
        }
        else {
            let deferred = Q.defer<void>();
            return  new Promise<string>(
                function (resolve) {
                    this.tenantQueryParamPromiseResolve = resolve;
                }
            );
        }
    }
}

观察到的行为

此软件中断执行：

this.tenantQueryParamResolve(tenant);

带有以下信息：

angular.js:13550 TypeError: this.tenantQueryParamResolve is not a function
    at MigrationHelperService.setTenantQueryParam (http://localhost:8080/iq/ng2/util/MigrationHelperService.js:31:26)
    at new eval (http://localhost:8080/iq/js/app.js:5703:36)
    at Object.instantiate (http://localhost:8080/iq/js/appVendor.js:16322:14)
    at $controller (http://localhost:8080/iq/js/appVendor.js:21772:28)
    at link (http://localhost:8080/iq/js/appVendor.js:45012:26)
    at invokeLinkFn (http://localhost:8080/iq/js/appVendor.js:21336:9)
    at nodeLinkFn (http://localhost:8080/iq/js/appVendor.js:20735:11)
    at compositeLinkFn (http://localhost:8080/iq/js/appVendor.js:20039:13)
    at publicLinkFn (http://localhost:8080/iq/js/appVendor.js:19919:30)
    at lazyCompilation (http://localhost:8080/iq/js/appVendor.js:20257:25) <div id="view" ng-view="" class="ng-scope">

预期行为

任务

this.tenantQueryParamPromiseResolve = resolve; 

在 getTenantQueryParam 方法中工作，正确设置 tenantQueryParamResolve。

我怀疑这是 getTenantQueryParam 范围内的问题；我尝试了多种替代方法均无济于事。是时候让知道自己在做什么的人来帮助我了！

提前感谢您的帮助。此致，罗德里戈。

后记注释

我在 this.tenantQueryParamPromiseResolve = resolve; 赋值上添加了一个 try/catch 块：

try {
    this.tenantQueryParamPromiseResolve = resolve;
}
catch(err) {
    console.log(err.stack);
}

任务失败！带有以下消息：

Failed to assign
MigrationHelperService.ts:75 TypeError: Cannot set property 'tenantQueryParamPromiseResolve' of undefined
    at eval (MigrationHelperService.ts:71)
    at new ZoneAwarePromise (zone.js:584)
    at MigrationHelperService.getTenantQueryParam (MigrationHelperService.ts:67)
    at LoginComponent.ngOnInit (loginComponent.ts:32)
    at DebugAppView._View_LoginComponent_Host0.detectChangesInternal (LoginComponent_Host.template.js:34)
    at DebugAppView.AppView.detectChanges (view.ts:243)
    at DebugAppView.detectChanges (view.ts:345)
    at ViewRef_.detectChanges (view_ref.ts:93)
    at eval (downgrade_ng2_adapter.ts:105)
    at Scope.$digest (angular.js:17064)

更进一步，在尝试设置它之前添加了访问 this.tenantQueryParamPromiseResolve 的尝试：

try {
    console.log("typof: " +  +  typeof this.tenantQueryParamResolve)
    this.tenantQueryParamPromiseResolve = resolve;
}
catch(err) {
    console.log(err.stack);
}

得到以下结果：

TypeError: Cannot read property 'tenantQueryParamResolve' of undefined
    at eval (MigrationHelperService.ts:70)
    at new ZoneAwarePromise (zone.js:584)
    at MigrationHelperService.getTenantQueryParam (MigrationHelperService.ts:66)
    at LoginComponent.ngOnInit (loginComponent.ts:32)
    at DebugAppView._View_LoginComponent_Host0.detectChangesInternal (LoginComponent_Host.template.js:34)
    at DebugAppView.AppView.detectChanges (view.ts:243)
    at DebugAppView.detectChanges (view.ts:345)
    at ViewRef_.detectChanges (view_ref.ts:93)
    at eval (downgrade_ng2_adapter.ts:105)
    at Scope.$digest (angular.js:17064)

似乎 this.tenantQueryParamResolve 没有作用域！阅读 TypeScript 似乎这与函数相关联，因此它是有道理的。这就是说，我怎样才能从 promise 函数中访问服务 tenantQueryParamResolve ？我已经尝试了所有可能的咒语，但我的魔杖已经用尽了我们的力量！

Answer 1

因为你只是声明tenantQueryParamResolve 而不初始化它。如果您在 MigrationHelperService 的构造函数中添加这样的内容，错误就会消失：

this.tenantQueryParamResolve = (x: string) => { console.log(x); }

Answer 2

问题正如我所料，是范围问题。我通过将 tenantQueryParamResolve 声明为静态来解决它，最终的工作产品是：

import { Injectable } from "@angular/core";

@Injectable()
export class MigrationHelperService {

    /*
     * This is a helper service to be used to capture the route’s tenant query
     * parameter in the NG1 SignInController and make it available in the LoginComponent
     * to enable it to show / hide the tenant form control.
     * TODO: replace it with NG2 route management when the time is right.
     */
    private tenantQueryParam: string;
    private static tenantQueryParamResolve: (x: string) => void;
    private static tenantQueryParamPromise: Promise<string>;

    constructor() {
        MigrationHelperService.tenantQueryParamPromise = new Promise<string>(
            function (resolve) {
                MigrationHelperService.tenantQueryParamResolve = resolve;
            }
        );
    }

    public setTenantQueryParam(tenant: string) {
        this.tenantQueryParam = tenant;
        MigrationHelperService.tenantQueryParamResolve(tenant);
    }

    public static getTenantQueryParam(): Promise<string> {
        return MigrationHelperService.tenantQueryParamPromise;
    }
}