補間用のインポート関数の使用

Question

特定の方法で日付を表示するFormatDateと呼ばれる作成した関数を使用しようとしているところで、以下のコンポーネントがあります。私は私のHTMLの補間を介して実装することを期待していたが、関数は認識されません。コンポーネントにローカルな関数でラップすることなくそれを利用する方法はありますか？私はAngular - Template Syntaxの文書を読んだが、何も私に飛び乗ったことはなかった。

import { Component } from '@angular/core'; 
import { FormatDate } from '../shared/commonFunctions'; 
@Component({ 
    selector: 'my-component', 
    template: '<h3>{{FormatDate(rightNow)}}</h3', 
}) 
export class myComponent { 
    rightNow = Date(); 
} 

私の回避策は以下の通りですが、私はそれを回避する方法を見つけることを期待していたので、それは私に見苦しいです。

import { Component } from '@angular/core'; 
import { FormatDate } from '../shared/commonFunctions'; 
@Component({ 
    selector: 'my-component', 
    template: '<h3>{{dateFormat(rightNow)}}</h3', 
}) 
export class myComponent { 
    rightNow = Date(); 

    dateFormat(date: string): string { 
     return FormatDate(date); 
    } 
} 

Answer 1

import {Pipe, PipeTransform} from "@angular/core"; 
@Pipe({name: 'transformDatePipe'}) 
export class TransformDatePipe implements PipeTransform { 

    transform(date: string, params:any...): any { 
     return yourFunction(); 
    } 
} 
import { Component } from '@angular/core'; 
import { FormatDate } from '../shared/commonFunctions'; 
@Component({ 
    selector: 'my-component', 
    template: '<h3>{{rightNow|transformDatePipe:anyAdditionalParamsYouNeed}}</h3', 
}) 
export class myComponent { 
    rightNow = Date(); 
} 

ドンの `tは、モジュール宣言アレイに新しいパイプを追加するのを忘れ。 https://angular.io/guide/pipes