在Angular中,可以通过以下两种方式从外部JS文件中导入一个类:
在外部JS文件中:
// MyClass.js
class MyClass {
constructor() {
// constructor logic
}
// class methods
}
// 将类暴露为全局变量
window.MyClass = MyClass;
在Angular组件中:
// app.component.ts
import { Component } from '@angular/core';
declare var MyClass: any;
@Component({
selector: 'app-root',
template: `
My Angular App
`,
})
export class AppComponent {
constructor() {
const myClassInstance = new MyClass();
// 使用 MyClass 实例
}
}
安装依赖:
npm install --save-dev script-loader
在Angular组件中:
// app.component.ts
import { Component } from '@angular/core';
import * as myClassModule from 'script-loader!../path/to/MyClass.js';
@Component({
selector: 'app-root',
template: `
My Angular App
`,
})
export class AppComponent {
constructor() {
const MyClass = myClassModule.default;
const myClassInstance = new MyClass();
// 使用 MyClass 实例
}
}
注意:在上述代码中,使用了script-loader!
前缀来告诉Webpack加载外部JS文件。根据你使用的模块加载器,可能需要调整导入语句。
这些解决方法可以帮助你从外部JS文件中导入一个类,并在Angular中使用它。