Javascript 在Angular 2模板中使用原型扩展方法

如何在Angular 2模板中使用自定义原型？附件是我写的原型。这在我的单元测试以及任何Angular 2组件typescript文件中都非常有效。但是，如果我试图在Angular 2 html模板文件中使用它，则会引发一个异常，指出toUtcDate（）不是指定日期对象的函数

我怀疑我必须以某种方式将这个原型引导到我的应用程序模块中，但我目前对如何继续感到困惑

interface Date {
    toUtcDate(): string;
}

Date.prototype.toUtcDate = function(): string {
    var utcMonth = this.getUTCMonth() + 1;
    var utcDate = this.getUTCDate();

    var year = this.getUTCFullYear();
    var month = utcMonth < 10 ? '0' + utcMonth : utcMonth;
    var day = utcDate < 10 ? '0' + utcDate : utcDate;
    var hours = this.getUTCHours() < 10 ? '0' + this.getUTCHours() : this.getUTCHours();
    var minutes = this.getUTCMinutes() < 10 ? '0' + this.getUTCMinutes() : this.getUTCMinutes();
    var seconds = this.getUTCSeconds() < 10 ? '0' + this.getUTCSeconds() : this.getUTCSeconds();
    var milliseconds = this.getUTCMilliseconds() < 10 ? '0' + this.getUTCMilliseconds() : this.getUTCMilliseconds();
    return (year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':' + seconds + '.' + milliseconds + 'Z');
}

接口日期{
toUtcDate（）：字符串；
}
Date.prototype.toUtcDate=函数（）：字符串{
var utcMonth=this.getUTCMonth（）+1；
var utcDate=this.getUTCDate（）；
var year=this.getUTCFullYear（）；
风险值月数=UTC月数<10？'0'+UTC月数：UTC月数；
var day=utcDate<10？'0'+utcDate:utcDate；
var hours=this.getUTCHours（）<10？'0'+this.getUTCHours（）：this.getUTCHours（）；
var minutes=this.getUTCMinutes（）<10？'0'+this.getUTCMinutes（）：this.getUTCMinutes（）；
var seconds=this.getUTCSeconds（）<10？'0'+this.getUTCSeconds（）：this.getUTCSeconds（）；
var毫秒=this.getutcmillesons（）<10？'0'+this.getutcmillesons（）：this.getutcmillesons（）；
返回值（年+'-'+月+'-'+日+'T'+小时+'：'+分钟+'：'+秒+'.+毫秒+'Z'）；
}

我不确定是否有其他方法可以实现这一点，但这里是Angular 9中的一个工作示例

我对String对象进行了如下扩展（file=String.extensions.ts）：

在您的组件中，您需要导入string.extensions文件（路径对于正确操作非常重要）：

这使它在组件的TS文件中可用。例如

import './yourPath/string.extensions.ts';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.scss']
})
export class MyComponent implements OnInit {

  constructor() {
    const testString = 'test';
    console.log(String.isNullOrEmpty(testString)); //false

    const anotherTestString = null;
    console.log(String.isNulleOrEmpty(anotherTestString)); //true
  }

  ngOnInit() {}
}

最后是恼人的一点——让它在模板中工作。您所需要做的就是声明一个您要扩展的类型的公共变量。例如

String = String;

因此，前面的示例组件TS文件现在如下所示：

import './yourPath/string.extensions.ts';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.scss']
})
export class MyComponent implements OnInit {

  constructor() {}

  String = String;
  stringToTest = null;

  ngOnInit() {}
}

要在HTML模板中使用它，请执行以下操作：

<div *ngIf="!String.isNullOrEmpty(stringToTest)">
  string was not empty or null
</div>

字符串不是空的或空的

问题1：隐藏JS内置类型。问题2：使用typescript，但你在原型上操作，如果你问meSeems好像你最好在这里使用管道，那就很糟糕了。你为什么要走显示的路线@JosephKing我想我只是想要一个扩展方法，但显然这不是Angular 2中的东西？我现在把它改写成一根管子。

import './yourPath/string.extensions.ts';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.scss']
})
export class MyComponent implements OnInit {

  constructor() {}

  String = String;
  stringToTest = null;

  ngOnInit() {}
}

<div *ngIf="!String.isNullOrEmpty(stringToTest)">
  string was not empty or null
</div>