如何在运行时以 Angular 2 加载外部 js 脚本？

Posted 2023-03-06

【中文标题】如何在运行时以 Angular 2 加载外部 js 脚本？

【英文标题】：How to load external js script in angular 2 in runtime?

【发布时间】：2016-05-17 15:16:11

【问题描述】：

我正在使用 Twitter 数字进行身份验证。它需要一个小的 .js 脚本来下载并初始化它。他们建议直接从他们的服务器获取文件。

我要导入

<script id="digits-sdk" src="https://cdn.digits.com/1/sdk.js" async></script>

并使用 Digits.init() 之类的方式初始化 sdk。

我正在使用使用 webpack 的 angular2 webpack starter 模板。

之前我使用的是 systemjs，我只是将文件名映射到 url 并将其导入到我的组件中。像这样

  var map =  'Digits':'https://cdn.digits.com/1/sdk' ;

然后将它导入到像import * as Digits from 'Digits';这样的角度组件中

我知道有 webpack externals，但是不一致。

console.log(Digits) in ngOnInit() 有时显示正确的对象有时未定义错误。

【参考方案1】：

我在这方面有一些运气。我正在使用日历 js 文件，并希望从控制器的输入中获取日期结果。就我而言，它是 Pickaday。首先像往常一样导入文件，无论您的主 html 文件是什么。

<script src="/assets/js/pikaday.js"></script>

然后创建一个代表你需要的功能的类。

export class PikadaySource 
    field: any;
    firstDay: number;
    minDate: Date;
    maxDate: Date;
    yearRange: number = 1;
    disableWeekends: boolean;
    format: string = 'MM-DD-YYYY';
    init();

该类的目的是防止转译器出现问题。由于导入的脚本在全局范围内，它现在应该可以使用了。