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

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

资产/js/multiselect.js

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

"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' 隐含了一个 'any' 类型。

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

PS：

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

score 1 · Accepted Answer

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

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')
      });
    }
}

为了将此文件导入到角度 ts 文件中，我必须tsconfig.json通过允许 js 导入来允许它，如下所示，

"allowJs": true

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

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

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

1 回答 1

Related

Reference