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

Question

我已将 moment 添加到我的项目中，我想知道如何全局更改 moment.fn.toJSON 的行为。

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

这里是摘录:

import * as moment from 'moment';

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

有人有想法吗？

Answer 1

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

例如:

//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) 在代码中导入、注入(inject)和使用扩展类和新方法:

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