Angular 2 管道或指令？哪个是最好的？答案

【问题标题】：Angular 2 pipe or directive ? which is the best one?Angular 2 管道或指令？哪个是最好的？
【发布时间】：2018-06-04 20:37:13
【问题描述】：

我的应用中有几个日期字段。所以我需要将日期作为时间戳发送到数据库。所以我打算编写一个自定义管道来修改模型值。这适合我的需要吗？还是我需要为此编写自定义指令？

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {
  transform(value: string, args: string[]): any {
    if (!value) return value;

    return value.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }
}

【问题讨论】：

我建议您解释一下您的情况。 需要将日期作为时间戳发送到数据库 - 它与问题有什么关系？你打算用管道修改日期吗？指令和管道都不适合。
是的，我将使用指令或管道更改模型值，以便我可以将时间戳发送到 db，但实际日期将显示给用户，我打算这样做，跨度>

标签： angular angular2-directives angular2-pipe

【解决方案1】：

希望我正确理解了您的问题。
对于转换，您可以使用标准 DatePipe（或扩展它），例如：

{{ dateField | date:'HH:mm:ss SSS'}}
{{ dateField | date:'HHmmssSSS':'+0000'}}

【讨论】：

【解决方案2】：

你有它倒退。在 Angular 中，在模板中使用管道以更合适的方式显示数据。它们不会修改您的实际数据。

我建议使用 ng-bootstrap 库（您可以在 Github 上找到它）来使用适当的日历小部件。该模型可以配置为返回时间戳。

编辑：在代码中添加调用示例：

let name = new UserNamePipe().transform(user);

https://stackoverflow.com/a/35159546/5885595

【讨论】：

管道只能在模板中使用吗？
管道通常应该为模板保留，但我发现有时在 TS 文件中调用它们也很方便。考虑它们是具有称为“转换”的方法的简单类。例如，请参阅答案。