[英]Unable to call a JS function from Typescript in Angular 13
I'm trying to call the following function, LoadMultiSelect()
, from one of my components because I am using a non-Angular library:我正在尝试从我的一个组件中调用以下 function,
LoadMultiSelect()
,因为我使用的是非 Angular 库:
https://ibnujakaria.github.io/multiple-select-js/ https://ibnujakaria.github.io/multiple-select-js/
This works perfectly in the console:这在控制台中完美运行:
new MultipleSelect('#select-multiple-language', {
placeholder: 'Select Language'
})
And loads the JS component.并加载 JS 组件。
Later, I try adding it in Angular, but I cannot find how to.后来,我尝试在 Angular 中添加它,但我找不到如何添加它。
I tried to export the JS function in two ways:我尝试通过两种方式导出 JS function:
export default function LoadMultiSelect() {
new MultipleSelect('#select-multiple-language', {
placeholder: 'Select Language'
});
}
And like this:像这样:
LoadMultiSelect() {
new MultipleSelect('#select-multiple-language', {
placeholder: 'Select Language'
});
}
var multiselect = new LoadMultiSelect();
export { multiselect };
I created a file to load the exported function:我创建了一个文件来加载导出的 function:
assets/js/multiselect.js
资产/js/multiselect.js
Later, I added it in my build
in the scripts
section from my angular.json
like this:后来,我将它添加到我的
angular.json
的scripts
部分的build
中,如下所示:
"scripts": [
"./node_modules/multiple-select-js/dist/js/multiple-select.js",
"src/assets/js/multiselect.js"
]
And then I tried to add it in my component like this:然后我尝试将它添加到我的组件中,如下所示:
import LoadMultiSelect from '../../../../../assets/js/multiselect';
import LoadMultiSelect from 'src/assets/js/multiselect';
But nothing works, I get this error:但没有任何效果,我收到此错误:
Could not find a declaration file for module '../../../../../assets/js/multiselect'.
找不到模块“../../../../../assets/js/multiselect”的声明文件。 '/Users/fanmixco/Documents/GitHub/holma-bootstrap/src/assets/js/multiselect.js' implicitly has an 'any' type.
'/Users/fanmixco/Documents/GitHub/holma-bootstrap/src/assets/js/multiselect.js' 隐含了一个 'any' 类型。
Or others, any idea what I'm doing wrong?或其他人,知道我做错了什么吗?
PS: PS:
Also, I tried using require
, but it also failed.另外,我尝试使用
require
,但也失败了。
I already tested previous solutions with an older version of Angular:我已经用旧版本的 Angular 测试了以前的解决方案:
I just tried this in my local system, with some random file like below,我刚刚在我的本地系统中尝试了这个,带有一些如下所示的随机文件,
export function MultipleSelect(val1, val2){
console.log('Be awesome always', val1, ' and ', val2);
}
now I import this in my component like this,现在我像这样在我的组件中导入它,
export class AppComponent {
title = 'stackoverflow-examples';
declare MultipleSelect: any;
constructor(
private fb: FormBuilder
) {
}
ngOnInit() {
import('./someRandomFile').then(randomFile=>{
randomFile.MultipleSelect('one', 'two')
});
}
}
in order fo this file to be imported in the angular ts file I must allow it in tsconfig.json
by allowing the js import as given below,为了将此文件导入 angular ts 文件中,我必须在
tsconfig.json
中允许它,方法是允许如下所示的 js 导入,
"allowJs": true
see the result in console below,在下面的控制台中查看结果,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.