web-dev-qa-db-ja.com

Angular日付パイプで文字をエスケープするにはどうすればよいですか？

Angular日付変数todayがあります 日付パイプ を使用しています：

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

2月13日

ただし、次のように表示したいと思います。

これまでの2月13日

これに対して素朴なアプローチを試みると、次の結果が得られます。

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

13 13PM201818 2月の18o fPMr

これは、たとえば、dが日を参照するためです。

Angular日付パイプでこれらの文字をエスケープするにはどうすればよいですか？\dなどですが、バックスラッシュを追加しても結果は変わりませんでした。

angulardatedate-pipe
20
Thunderforge

これはどう：

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

一重引用符で囲まれたものはすべて無視されます。それらを脱出することを忘れないでください。

20
Daniel P

次に、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など）からライブラリを参照する必要があることに注意してください。

1
Igor

私の知る限り、これは、Angularこの回答の時点での日付パイプでは不可能です。1つの代替策は、次のように複数の日付パイプを使用することです。

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

編集：

これを投稿した後、@ Gh0sTの解決策を試してみましたが、うまくいったので、1つの日付パイプを使用する方法があると思います。

1
Rich McCluskey

これは私にとっては効果的です{{today |日付： "d 'これまでの日数LLLL"}}

0
Carlos Fagiani Jr