离子2 Angular 2全局进口扩展方法

Question

我已经对日期原型进行了一些扩展：

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

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

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

Answer 1

将您的猴子补丁代码放入文件中。例如

monkey-patch-date.ts

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

，然后在 main.ts 中导入它，或任何您的入口模块是：

main.ts

import './monkey-patch-date';

交替。如果您想额外明确说明自己正在做危险的事情，则可以使其成为导出其猴子点的模块。

monkey-patch-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();

另一种替代方案，对于图书馆作者特别有用是允许猴子捕捉但不需要它在仍然暴露功能的同时。

这是一个示例：

date-aigmentations/index.ts

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

date-aigmentations/monkey-patch.ts

import {yearsFromToday} from './index';
declare global {
    interface Date {
        yearsFromToday(): number;
    }
}
Date.prototype.yearsFromToday = function() {
    return yearsFromToday(this);
}

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

来修补日期原型

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