在运行时在类型记录中声明抛出未定义异常的变量

Question

我正在使用MDL ( https://getmdl.io/components/#menus-section )开发一个Range2应用程序。因为by页面是在AJAX调用之后加载的，所以MDL的菜单由于DOM的后期注入而无法工作。我做了一些研究发现我不得不

if(!(typeof(componentHandler) == 'undefined')){
      componentHandler.upgradeAllRegistered();
  }

在AJAX调用完成之后。我在跟踪Material Design Lite JS not applied to dynamically loaded html file，所以我有疑问。现在我不得不从ts代码中执行js代码。我发现我可以做一些像Angular 2 typescript invoke javascript function这样的事情

以上问题摘录如下：

import { AfterViewInit }       from '@angular/core';

interface MYTHEME {
    documentOnLoad: INIT;
    documentOnReady: INIT;
}
interface INIT {
    init: Function;
}
declare var MYTHEME: MYTHEME;

export class AppComponent implements AfterViewInit {

    constructor() {
    }

    ngAfterViewInit() {
        MYTHEME.documentOnLoad.init(); 
        MYTHEME.documentOnReady.init();
    }
}

我遵循了上述方法，并做了以下工作：

export interface  Mdl {
    componentHandler: ComponentHandler;
}

export interface ComponentHandler {
    upgradeAllRegistered : Function;
}

在主要构成部分：

import { Mdl, ComponentHandler } from '../../external-declaration/mdl-component-handler';
declare var mdl: Mdl; 

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    providers: [ReleaseService]
})
export class HomeComponent implements OnInit {

....

 getLatestReleaseList(): void {

        this.releaseService.getLatestReleaseList()
            .subscribe(release => {

                var releaseGrp: Map<string, Release[]> = this.groupBy(release, function (r: Release): string {
                    return r.codeFamily;
                });

                this.releaseVm = this.getReleaseList(releaseGrp);
                mdl.componentHandler.upgradeAllRegistered(); <- this line compiles but throws exception at runtime.
            },
            err => {
                console.log(err);
            });
    }
....

}

运行时的异常：

vendor.js:68951 ReferenceError: mdl is not defined
    at SafeSubscriber._next (http://localhost:2362/dist/0.6b937031dbb59a007082.hot-update.js:41:13)
    at SafeSubscriber.__tryOrUnsub (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11432:16)
    at SafeSubscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11381:22)
    at Subscriber._next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11323:26)
    at Subscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11287:18)
    at CatchSubscriber.Subscriber._next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11323:26)
    at CatchSubscriber.Subscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11287:18)
    at MapSubscriber._next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:36945:26)
    at MapSubscriber.Subscriber.next (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:11287:18)
    at XMLHttpRequest.onLoad (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:71668:38)
    at ZoneDelegate.invokeTask (http://localhost:2362/dist/vendor.js?v=w1r1UU-7Z-gJK3-MpTp29-Dk65Qv3v0FE5JpNApzvjo:56992:31)

我做错了什么？

Answer 1

ReferenceError: mdl未定义

如果模块中没有为mdl分配任何内容，那么它将无法神奇地工作。

更多

declare var mdl: Mdl; 

是错的。您应该得到一个实际的变量，而不仅仅是声明它在那里(神奇地)。