Question

我正在尝试将外部js文件导入到我的组件中。

external.js

var x=9;

component.ts

import '../../assets/api/external.js';
declare let x: any;
....
console.log(x);

我得到了：

ERROR ReferenceError: x is not defined

如何从组件中访问x？它没有抱怨无法找到js文件。

Answer 1

请将您的脚本添加到angular-cli.json中作为全局脚本。

 "scripts": [
"../external.js",
"../node_modules/.....min.js",
"../node_modules/jspdf-autotable/dist/....js"
],

让我们知道它是否有帮助。以下是参考链接：https://github.com/angular/angular-cli/wiki/stories-global-scripts

Answer 2

您的导入js没有将任何功能或类导出到您的组件。导入的MDN接口订阅import 'module_name'：

仅导入整个模块的副作用，无需导入任何内容。这会运行模块的全局代码，但实际上并未导入任何值。

所以改变你的并添加类或函数然后导出。

Answer 3

您可以在Angular应用程序中从anthoer脚本调用varibale。

步骤1.在assests / javascript文件夹中创建demo.js文件。

export function test1(){
    console.log('Calling test 1 function');
}

步骤2.在assests / javascript文件夹中创建demo.d.ts文件。

export declare function test1();

步骤3.在组件中使用它

//User defined file path
import { test1 } from '../assets/javascript/demo'; 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(test1());
  }
}

注意：js和.d.ts文件名应该相同

Angular 2：可以从组件访问外部js文件变量

3 个答案: