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

Question

我有一个 Angular 日期变量 today，我正在使用 date pipe，就像这样：

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

February 13

不过，我想让它看起来像这样：

13 days so far in February

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

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

13 13PM201818 18o fPMr in February

这是因为，例如 d 指的是一天。

如何在 Angular 日期管道中转义这些字符？我尝试了 \d 等，但结果并没有随着添加的反斜杠而改变。

Answer 1

那么按照 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'}}

对于所有格式说明符，请参阅 documentation for format。

请记住，您必须将 momentjs 作为导入语句导入，将其导入到您的 cli 配置文件中，或者从根 HTML 页面（如 index.html).

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

这对我有用 {{今天 |日期："d 'days so far in' LLLL"}}

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>
   `

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

How do I escape characters in an Angular date pipe?

date

date-pipe

angular