更多

Question

我正在使用MDL（https://getmdl.io/components/#menus-section）开发Angular 2应用程序。由于在AJL调用菜单之后，由于DOM中的后期注入，因此页面被加载。我做了一些研究，发现我必须执行

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

AJAX调用完成后

。我正在关注Material Design Lite JS not applied to dynamically loaded html file SO问题。现在我不得不从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，那么它就不会神奇地工作。

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

1 个答案:

更多