Question

这是我的Angular组件：

import { basketModule } from './wind'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {



    constructor(){
    }

    ngOnInit(){
        basketModule.init()
    }

    public dataMain(){
        alert('hi')
    }
}

以下是导入的wind.js文件。

export var basketModule = (function () {

return {

  init: function(){
       dataMain()
    }

}
})();

当我运行上面的代码时，它会返回一个错误

core.es5.js:1020 ERROR ReferenceError: dataMain is not defined

如何从导入的库中访问Angular组件方法dataMain？

Answer 1

如果您正在使用AngularCLI，则需要将该文件添加到angular-cli.json文件的scripts部分。

"scripts": [
     // path to script here in quotes
 ],

无论您是否使用angular cli，请确保tsconfig.json文件中的'allowJs'标志设置为true。

 {
     "compilerOptions": {
       "target": "es5",
       "sourceMap": true,
       "allowJS": true   // this one
   }
}

然后尝试导入组件中的库

import * as wind from './path/to/lib/wind.js'

现在您应该可以使用'wind'名称

访问库函数

 wind.dataMain();

Answer 2

如果您想在 B 文件中使用 A 文件方法，那么您应该在B中导入A

但是你应该把你的方法放在一个服务中，然后在wind.js中导入服务

从导入的库中调用Angular Component方法

2 个答案: