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

【问题标题】：How do I escape characters in an Angular date pipe?如何在 Angular 日期管道中转义字符？
【发布时间】：2018-07-24 08:34:54
【问题描述】：

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

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

2 月 13 日

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

2 月至今 13 天

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

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

2 月 13 13PM201818 18o fPMr

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

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

【问题讨论】：

对于比angular.io/api/common/DatePipe 更复杂的东西，你应该使用moment.js
github.com/angular/angular/blob/master/packages/common/src/… 这些是所有可用的值。您打算如何以这种方式处理第一天和第二天的工作？
@VagrantAI 我已经编辑了一个不依赖于第 1 天和第 2 天的不同示例，因为我不希望这会分散我实际要求的内容。
你试过方括号吗？ d [days so far in] LLLL
@Igor 不幸的是不起作用：13 [13PM201820 20o fPMr in] February

标签： angular date date-pipe

【解决方案1】：

这个怎么样：

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

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

【讨论】：

对我来说，它适用于双引号。 {{今天 | date:"d \'days so far in\' LLLL"}}
我通过使用date: "MMM d '\'\yy 'at' H:mm:ss" 成功获得了类似Feb 11 '21 at 16:28:47（带有文字单引号）的结果。

【解决方案2】：

这对我有用 {{今天 | date:"d 'days so far in' LLLL"}}

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
@Mark 它类似于接受的答案，只是使用不同的引号，所以不需要转义它
@CarlosFagianiJr 您能否更改变量名称和日期模式，使其与相关示例匹配？
它与接受的答案不同。因为接受的答案对我不起作用。
这是一个很好的答案。干得好卡洛斯

【解决方案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'}}

有关所有格式说明符，请参见documentation for format。

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

【讨论】：

【解决方案4】：

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

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

编辑：

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

【讨论】：

【解决方案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>
   `

【讨论】：