2017-05-24 11 views
1

angular2-momentでIonic3を使用しています。パイプは、例えば、タイムスタンプをフォーマットするために完璧に動作します。:角型2モーメントパイプ(Javascript)

HTML

<ion-note class="small-text-search"> 
    Last Online {{personModel.lastAccessDate | amTimeAgo:true}} ago 
</ion-note> 

出力:

Last Online 19 days ago 

これは私のHTMLコードであるが。

Typescript Error Cannot find name 'amTimeAgo'. 

が質問

誰がどのように知ってい:しかし私は、元

TS

'Last Online '+personModel.lastAccessDate | amTimeAgo:true +' ago'; 

エラーJavascriptを文字列、でこれをやりたいですjavascriptでパイプを使用しますか?どのように私はこれをコード化するでしょうか?ありがとう。

答えて

2

ほとんどのパイプは、それぞれのサービスの周りの薄いラッパーです。

パイプの中には、それ以外の場合には置き換えが困難な機能(たとえば、角パイプを内蔵)があります。この場合、パイプクラスをインスタンス化し、transformメソッドを呼び出すことができます。

コンポーネントと統合するためにChangeDetectorRefを使用するパイプのように、コンパイラでのみ使用するパイプはほとんどありません。 time-ago pipe is one of those pipes.

適切な方法は、サービスとライブラリを直接使用することです。ちなみに、angular2-momentはモーメントライブラリのラッパーです。

'Last Online '+ moment(personModel.lastAccessDate).fromNow() +' ago'; 
+0

カスタムパイプを構築して同じロジックをすでに行っているので、なぜ私たちが冗長コードブロックを作成するのか、まだ混乱しています。そして、このhttps://github.com/angular/angular/issues/3809を検索して見つけました。 – Pengyy

+0

@Pengyyパイプはオーバーヘッドを導入し、そのような使用方法と互換性のないものを実行する可能性があります(moment.fromNowと前回の比較は非常に良い例です)。直接サービス/ライブラリを使用することは非常にKISSのアプローチです。 'transform'を使う唯一の良い理由は、良い選択肢がないときです(私は組み込みのパイプでこれを行いましたが、ロジックが問題を起こさないことを確認しなければなりませんでした)。 A1と$ filterでは少し違っていましたが、A2 +ではそうです。 – estus

+0

あなたのexplainationのおかげで、私はちょうどTimeAgoPipeは 'ChangeDetectRef'を注入述べた。 – Pengyy

関連する問題