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

Question

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

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

2月13日

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

2月至今13天

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

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

13 13PM201818 18o fPMr 二月

这是因为，例如d指天。

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

Answer 1

这个怎么样：

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

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

Answer 2

这对我有用{{今天 | date:"d 'days so far in' 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>
   `