Question

任何人都可以帮我如何从我的angular2组件中的外部js文件调用一个函数。下面是我的代码片段，当我尝试加载应用程序时，它正在抛出应用程序是未定义的错误。

这是我的组件代码：

import { Component, OnInit, AfterContentInit } from '@angular/core';

@Component({
    selector: 'test',
    templateUrl: './test.html'
})

export class TestComponent implements OnInit {

    constructor() { }

    ngOnInit() {

    }

    ngAfterViewInit() {
        App.handleInit();
    }
}

这是app.js中的脚本：

var App = function() {
    var handleInit = function() {
        console.log("Hello world");
    };
}();

当我们在ngAfterViewInit中调用一个函数时，它正在抛出App未定义的错误。

我们正在vendor.ts中导入app.js文件，我们正在使用webpack。这里app.js加载正常，但功能不起作用。

请帮助我们解决问题。

提前致谢。

Answer 1

您可以这样访问。这有帮助

import { Component, OnInit, AfterContentInit } from '@angular/core';
import '../../../../js/app.js'; //just example set this based on your path
declare var App: any;

@Component({
    selector: 'test',
    templateUrl: './test.html'
})
export class TestComponent implements OnInit {

    constructor() { }

    ngOnInit() { }

    ngAfterViewInit() {
        this.handleInit();
    }

    hadeleInit() {
        new app.handleInit();
    }
}

Answer 2

您只需在组件中定义App变量，如下所示。

declare var App: any;
@Component({
   .....
})

现在你的下面的电话会有效。

ngAfterViewInit() {
    App.handleInit();
}

在角度2中调用javascript函数时出现未定义的错误

2 个答案: