如何转义 Angular 日期管道中的字符？

Question

我有一个 Angular 日期变量

today

，我正在使用 日期管道，如下所示：

{{today | date:'LLLL d'}}

2 月 13 日

但是，我想让它看起来像这样：

二月迄今已有 13 天

当我尝试一种幼稚的方法时，我得到了这个结果：

{{today | date:'d days so far in LLLL'}}

13 13PM201818 18点二月

这是因为，例如

d

指的是这一天。

如何在 Angular 日期管道中转义这些字符？我尝试了

\d

等，但结果并没有随着添加反斜杠而改变。

Answer 1

这个怎么样：

{{today | date:'d \'days so far in\' LLLL'}}

单引号内的任何内容都会被忽略。只是别忘了逃离他们。

Answer 2

这对我有用：

{{today | date:"d 'days so far in' LLLL"}}

Answer 3

据我所知，在回答这个问题时，Angular 日期管道是不可能实现这一点的。一种替代方法是使用多个日期管道，如下所示：

{{today | date:'d'}} days so far in {{today | date:'LLLL'}}

编辑：

发布此内容后，我尝试了 @Gh0sT 的解决方案并且它有效，所以我想有一种方法可以使用一个日期管道。

Answer 4

按照 RichMcCluskey 的建议，将多个管道串在一起的唯一替代方法是创建一个自定义管道，使用传入的日期调用 momentjs 格式。然后您可以使用相同的语法，包括 momentjs 支持的转义序列。

这样的东西可以工作，它不是一个详尽的解决方案，因为它根本不处理本地化，并且没有错误处理代码或测试。

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

@Pipe({ name: 'momentDate', pure: true })
export class MomentDatePipe implements PipeTransform {

    transform(value: any, pattern: string): string {
        if (!value)
            return '';
        return moment(value).format(pattern);
    }
}

然后是调用代码：

{{today | momentDate:'d [days so far in] LLLL'}}

有关所有格式说明符，请参阅格式文档。

请记住，您必须将

momentjs

作为导入语句导入，将其导入到 cli 配置文件中，或者从根 HTML 页面（如 index.html）引用该库。

Answer 5

有时需要对转义的

'

字符进行双重转义。例如。当它作为输入传递到组件或在元素上设置属性时。

@Component({
  selector: 'comment',
  template: `
    <tooltip 
      [message]="timeCreated | date: 'EEEE, MMMM d, y \\'at\\' HH:mm a'">
    </tooltip>
   `

或

@Component({
  selector: 'comment',
  template: `
    <tooltip 
      message="{{ timeCreated | date: 'EEEE, MMMM d, y \\'at\\' HH:mm a' }}">
    </tooltip>
   `