Question

假设我在 angular 7 应用中有一个js文件mylib.js，位于assets/mylib.js：

mylib = function(){
    return {
        hi: function() { alert('hi'); }
    };
}();

我想在我的hero-form.component.ts中打电话给mylib.hi()，这样做的正确方法是什么？

我尝试与安装的jquery包相同，并且它可以正常工作，因此我像这样在angular.json -> projects/myproject/architect/build/options/scripts中添加了它： "scripts": ["node_modules/jquery/dist/jquery.js", "src/assets/mylib.js"] 并在hero-form.component.ts中：

import * as $ from "jquery"; // works, installed via npm
import * as mylib from "mylib"; // cannot find module mylib

我通过调用组件进行测试：

  ngOnInit() {
    $('body').css('background','gainsboro');
    mylib.hi();    
  }

请注意，我不想将脚本全局添加到index.html标头中，我想为需要它的每个组件调用导入

Answer 1

将mylib从mylib.js中导出为（只需将其放在文件底部）：

export mylib;

Answer 2

（由于删除了帮助我的答案，因此我正在发布此信息）

在我必须使用的hero-form.component.ts中

declare const mylib: any;

代替import * as mylib from "mylib"

另一项重要的事情是，您在ng serve中添加脚本后关闭了运行angular.json的控制台（或ctrl + c），然后再次运行ng serve
< / li>
我还必须按照答案中的建议从export mylib;中删除mylib.js，因为这会引发错误unexpected token export

我通过关注评论中建议的文章来获得此答案：https://www.truecodex.com/course/angular-6/how-to-use-external-js-files-and-javascript-code-in-angular

在angular 7应用程序中添加和使用自定义js文件

2 个答案: