如何使用 Angular 2 扩展外部 JavaScript 库？

【问题标题】：How to extend external javascript library with angular 2?如何使用 Angular 2 扩展外部 JavaScript 库？
【发布时间】：2017-04-03 15:32:06
【问题描述】：

我已在我的项目中添加了时刻，我想知道如何在全局范围内更改 moment.fn.toJSON 的行为。

目前，我正在使用构造函数来执行此操作，并且它可以工作。但我不想将此代码粘贴到我的所有控制器中。

所以这里是摘录：

import * as moment from 'moment';

constructor(fb: FormBuilder) {
    moment.fn.toJSON = function () { return this.format(); }
}

有人有想法吗？

【问题讨论】：

将此添加到您的 main.ts 或 polyfills.ts，或创建一个抽象类，您的组件从中继承。
我终于完成了一项服务。这仍然不是我想做的，但它工作正常。您的解决方案似乎很棒，我将不得不看看它。谢谢！

标签： javascript angular typescript momentjs

【解决方案1】：

只需扩展 3rd 方库中的类并根据需要添加您的自定义方法。

例如：

//1) 扩展类：

 export class MyFormBuilder extends FormBuilder{

     public myCoolMethod(): string{
        return "Awesome stuff!"
     }
 }

//2) 将您的类导入“应用程序模块”（用于系统范围的访问）

import { MyFormBuilder }     from './Services/MyFormBuilder';
@NgModule({
    declarations: [AppComponent, AppHeader, AppFooter],
    imports:      [BrowserModule, ReactiveFormsModule],
    providers:    [MyFormBuilder],
    bootstrap:    [AppComponent],
})

//3) 在代码中导入、注入和使用扩展类和新方法：

import { MyFormBuilder }     from './Services/MyFormBuilder';
export class AppComponent{
    constructor(private fb: MyFormBuilder){}
    pageTitle : string = this.fb.myCoolMethod();
}

【讨论】：