Angular 5中如何公开JS函数？组件访问外部JS函数失败求助

嘿，我懂你现在的处境——已经成功让外部JS里的data变量在组件里全局访问了，但Loaddata()函数就是没法调用，对吧？咱们来把这个问题搞定！

首先，你已经做的两步是对的：在angular-cli.json里引入JS文件，在typings.d.ts里声明变量。问题出在函数没有对应的类型声明，TypeScript没法识别这个全局函数，所以会报错。

解决方案步骤： #

1. 完善typings.d.ts的类型声明
   打开你的typings.d.ts文件，除了已有的变量声明，再加上函数的声明。根据Loaddata()的实际返回值调整类型（比如如果它返回Promise就写Promise<any>，如果没有返回值就写void）：

   // typings.d.ts
   declare var data: any; // 你已有的变量声明
   declare function Loaddata(): void; // 新增函数声明
   

2. 在组件中调用函数
   现在TypeScript已经知道这个全局函数存在了，你可以直接在app.component.ts里调用它。如果担心typings的声明没生效，也可以在组件顶部再补充一次声明（可选）：

   import { Component, OnInit } from '@angular/core';
   
   // 可选：如果typings声明没生效，在这里补充
   declare function Loaddata(): void;
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     ngOnInit() {
       // 直接调用全局函数
       Loaddata();
       // 同时访问变量
       console.log('全局data变量:', data);
     }
   }
   

3. 确认脚本加载顺序
   确保在angular-cli.json的scripts数组里，test.js的位置在Angular核心脚本之前，保证它在组件代码执行前就被加载：

   // angular-cli.json
   {
     "apps": [
       {
         "scripts": [
           "./assets/js/test.js" // 路径要和你的项目结构匹配
         ]
       }
     ]
   }
   

备选方案（类型不安全但快速） #

如果你不想折腾类型声明，也可以通过window对象直接访问全局函数，因为所有全局变量/函数都会挂载到window上：

// 在组件里
(window as any).Loaddata();
console.log((window as any).data);

不过这种方法跳过了TypeScript的类型检查，不推荐在正式项目中频繁使用。

内容的提问来源于stack exchange，提问作者CrazyCoder