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

【问题标题】：How to load external js script in angular 2 in runtime?如何在运行时以 Angular 2 加载外部 js 脚本？
【发布时间】：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() 有时显示正确的对象有时未定义错误。

【问题讨论】：

标签： javascript angular webpack twitter-fabric twitter-digits

【解决方案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(){};
}

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

【讨论】：