从 URL 导入 js 脚本到 Angular答案

【问题标题】：Import js script to Angular from URL从 URL 导入 js 脚本到 Angular
【发布时间】：2021-09-22 23:15:40
【问题描述】：

我正在使用 Angular 构建一个应用程序，但发现了一个我不知道如何解决的问题。我需要导入一个 js 脚本，它必须从互联网上导入。（因为这些是他们的规则，所以他们可以做修补程序）问题是，当我将脚本导入我的 index.html 时，我只能在 js 文件中使用它，而不能在 typescript 文件中使用它。如何在我的 ts 文件中使用该库？我无法通过 npm 安装它，也无法下载文件并将其添加到我的项目文件夹中。库是airconsole API (https://developers.airconsole.com/#!/api)

感谢您的帮助

【问题讨论】：

标签： javascript angular typescript import airconsole

【解决方案1】：

它只是在你的组件中添加declare var AirConsole 来使用它，一个傻瓜组件

import { Component, VERSION } from '@angular/core';

declare var AirConsole //<--this is the "magic"

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  airConsole=new AirConsole() //<--now you can use airConsole in your component
}

更新好吧，一般我们可以使用一个服务来管理airConsole，这让我们所有注入服务的组件都可以使用函数，变量，...

声明：我不知道“AirConsole”，所以我想控制它就像我们可以控制其他 .js（如 Cordova）一样）

由于我们需要 Angular 知道何时在 .js 中执行函数，我们的服务可以像

import { Injectable,NgZone } from '@angular/core';

declare var AirConsole;

@Injectable({
  providedIn: 'root',
})
export class AirConsoleService implements OnInit {

  airConsole=new AirConsole()

  message:Subject=new Subject<any>();

  constructor(private ngZone: NgZone) { }

  ngOnInit(){
     this.airconsole.onMessage = (from, data)=>{
      this.ngZone.run(() => {
        this.message.next({from:from,data:data})
      });

     })
  }

  message(device:any,message:any){
      this.ngZone.run(() => {
        this.airConsole.message(device,message);
      });

  }
}

所以，例如你可以订阅airConsoleService.message

【讨论】：

感谢您的回复，我的课是这样的：'declare var AirConsole:any;出口 var 空调：任何；导出函数 InitAirConsole(){ airconsole = new AirConsole(); console.log("创建的 AirConsole 控制器：" );控制台.log(airconsole); }´ 它可以工作，但我在控制台中收到以下错误：Uncaught SyntaxError: Unexpected token 'var'
@PatrickLangkau，我真的不知道 AirConsole。我想您可以使用一项服务，我会更新答案，但实际上我不知道是否有效或如何使用该服务。我没有足够的时间来检查或创建一个小例子，抱歉（如果我只是让你感到困惑，我深表歉意）