无法从 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';

但没有任何效果，我收到此错误：

找不到模块的声明文件 '../../../../../assets/js/multiselect'。 '/Users/fanmixco/Documents/GitHub/holma-bootstrap/src/assets/js/multiselect.js' 隐式具有“任何”类型。

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

附：

1. 另外，我尝试使用require，但也失败了。

2. 我已经用旧版本的 Angular 测试过以前的解决方案：

• Unable to call javascript function from Typescript in Angular 6
• How to call JavaScript functions from Typescript in Angular 5?
• 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 = 'stackoverflow-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 并按照建议进行导入