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

Question

我today有一个 Angular 日期变量，我正在使用日期管道，如下所示：

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

2月13日

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

2 月至今 13 天

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

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

13 13PM201818 2 月 18o fPMr

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

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

Answer 1

这个怎么样：

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

单引号内的任何内容都将被忽略。 只是不要忘记逃离他们。

Answer 2

这对我有用 {{今天 | 日期：“d '到目前为止的天数'LLLL”}}

Answer 3

然后，按照 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'}}

对于所有格式说明符，请参阅 format 的文档。

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

Answer 4

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

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

编辑：

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

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