Angular 13 中无法从 Typescript 调用 JS 函数

Question

我正在尝试从我的一个组件调用以下函数 LoadMultiSelect()，因为我使用的是非 Angular 库：

https://ibnujakaria.github.io/multiple-select-js/

这在控制台中完美运行：

new MultipleSelect('#select-multiple-language', {
  placeholder: 'Select Language'
})

并加载 JS 组件。

稍后，我尝试将其添加到 Angular，但我找不到如何添加。

我试过两种方式导出JS函数：

export default function LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Select Language'
  });
}

像这样：

LoadMultiSelect() {
  new MultipleSelect('#select-multiple-language', {
    placeholder: 'Select Language'
  });
}

var multiselect = new LoadMultiSelect();

export { multiselect };

我创建了一个文件来加载导出的函数：

assets/js/multiselect.js

后来，我在 angular.json 的 scripts 部分的 build 中添加了它，如下所示：

"scripts": [
              "./node_modules/multiple-select-js/dist/js/multiple-select.js",
              "src/assets/js/multiselect.js"
            ]

然后我尝试将它添加到我的组件中，如下所示：

import LoadMultiSelect from '../../../../../assets/js/multiselect';

import LoadMultiSelect from 'src/assets/js/multiselect';

但是没有任何效果，我得到这个错误：

Could not find a declaration file for module '../../../../../assets/js/multiselect'. '/Users/fanmixco/Documents/GitHub/holma-bootstrap/src/assets/js/multiselect.js' implicitly has an 'any' type.

或者其他人，知道我做错了什么吗？

P.S.:

此外，我尝试使用require，但也失败了。
我已经用旧版本 Angular 测试了以前的解决方案：

calling javascript function from typescript angular 2

Answer 1

我刚刚在我的本地系统中尝试了这个，有一些如下所示的随机文件，

export function MultipleSelect(val1, val2){
    console.log('Be awesome always', val1, ' and ', val2);
}

现在我像这样在我的组件中导入它，

export class AppComponent {
    title = 'Whosebug-examples';
    declare MultipleSelect: any;

    constructor(
      private fb: FormBuilder
    ) {
    }

    ngOnInit() {
      import('./someRandomFile').then(randomFile=>{
        randomFile.MultipleSelect('one', 'two')
      });
    }
}

为了将此文件导入到 angular ts 文件中，我必须允许它在 tsconfig.json 中允许 js 导入，如下所示，

"allowJs": true

在下面的控制台中查看结果，

注意：如果无法从 node_modules 加载文件，请将其放在 asset 等常规文件夹中，然后按照建议进行导入

Angular 13 中无法从 Typescript 调用 JS 函数

Unable to call a JS function from Typescript in Angular 13

javascript

angular

angular13