Ionic 2 Angular 2全局导入扩展方法

时间:2017-04-16 16:21:11

标签: javascript angular typescript ionic2

我对Date原型进行了一些扩展,如:

interface Date {
    YearsFromToday(): number;
}

Date.prototype.YearsFromToday = function (): number {
    // implementation 
}

我正在使用ionic2教程--v2模板,这是一个非常标准的布局 - app.html,app.ts,app.module等。

我想知道是否有一种简单的方法可以在全球范围内宣布这一点。我不确定将其放在项目中的确切位置?

1 个答案:

答案 0 :(得分:3)

将您的猴子补丁代码放入文件中。 您可以将其称为 monkey-patch-date.ts ,例如:

<强>猴子膜片date.ts

interface Date {
    YearsFromToday(): number;
}

Date.prototype.yearsFromToday = function (): number {
    // implementation 
}

然后将其导入 main.ts 或您的输入模块:

<强> main.ts

import './monkey-patch-date';

可替换地。你可以把它作为一个导出它的猴子修补程序的模块,如果你想要明确地说你正在做一些危险的事情。

<强>猴子膜片date.ts

declare global {
    interface Date {
        yearsFromToday(): number;
    }
}

export default function () {
    Date.prototype.yearsFromToday = function (): number {
        // implementation 
    };
}

并像

一样导入

<强> main.ts

import monkeyPatchDate from './monkey-patch-date';
monkeyPatchDate();

另一种替代方法,对图书馆作者特别有用的是允许猴子修补,但在仍然暴露功能时不需要它。

以下是一个例子:

<强>日期扩充/ index.ts

export function yearsFromToday(date: Date): number {
    // implementation 
}

<强>日期扩充/猴patch.ts

import {yearsFromToday} from './index';

declare global {
    interface Date {
        yearsFromToday(): number;
    }
}

Date.prototype.yearsFromToday = function() {
    return yearsFromToday(this);
}

现在,消费者可以通过运行

来修补Date原型
import 'date-augmentations/monkey-patch';

可以通过导出来访问该功能,而无需猴子修补任何东西

import {yearsFromToday} from 'date-augmentations';

const date = new Date('12-12-2023');
const yft = yearsFromToday(date);
console.log(yft); // prints 6