在 TypeScript 中声明变量抛出未在运行时定义的异常

Question

我正在使用MDL(https://getmdl.io/components/#menus-section(开发一个Angular 2应用程序。由于 by page 是在 AJAX 之后加载的，MDL 的调用菜单由于 DOM 中的后期注入而不起作用。我做了一些研究，发现我必须执行

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

在 AJAX 调用完成后。我正在关注材料设计精简版JS不适用于动态加载的html文件SO问题。现在我必须从ts代码执行js代码。我发现我可以做一些类似 Angular 2 打字稿调用 javascript 函数

的事情

摘自上面的SO问题：

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

引用错误： 未定义 mdl

如果模块中没有分配给mdl，那么它将无法神奇地工作。

更多

declare var mdl: Mdl; 

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