2017-02-07 4 views
1

角パイプの名前を表す文字列を取得してテンプレートで解決できるかどうかを調べたいと思っています。例えば:Angular2:パイプに文字列を解決する

//Component: 
pipe = 'date' 

//Template 
{{ pipe? (somevalue | pipe) : (somevalue) }} 

上記の例では、Iは、テンプレートで使用することができ、実際のパイプに文字列を解決できる方法があります。パイプを動的に適用するより良い方法はありますか?

ここでのユースケースは、コンポーネントのユーザーがその値に使用する形式の種類を判断できるようにすることです。

更新

文字列だけでなく、それのための任意の他の可能なフォーマットとして実行するためのパイプ名を受け入れ、カスタムパイプと一緒に行くことになりました。ここではパイプが「日付」とフォーマットであるかもしれないスニペットは、「MM/DD/YYYY」であるかもしれないです:

私はその後、作成し、受け入れられたパイプ名のマッピング/工場のいくつかの並べ替えを使用することになり

{{ somevalue | applypipe: pipe: format }}

それを変換メソッドを実行します。

アイデアありがとう!

多分これは、アイデアを得るのを助けることができる
+0

なぜ注入されたサービスを取得するカスタムパイプを構築していません。そのサービスは、ユーザーの選択/書式に基づいて変換方法を変更する方法を提供できます。 – maffelbaffel

+0

したがって、値がカスタムパイプを介して渡され、カスタムパイプが入力設定またはサービス設定に基づいて値を返すと考えています。{{somevalue | custompipe:pipe}}そして、カスタムパイプは文字列を実際のパイプにマップし、宣言し、値を変換して返します。私は正しく理解していますか? – lupus137

+0

はい、パイプを正しく解決するための工場が必要です。動的コンポーネントのインスタンス化が正しく機能しないため、動的パイプのインスタンス化も期待されます。 – VadimB

答えて

0

..

@Pipe({ 
    name: 'anyPipe' 
}) 
export class AnyPipe { 
    public transform(val: any, arg: any) { 
    return '!!' + val; 
    } 
} 

@Pipe({ 
    name: 'dynPipe' 
}) 
export class DynamicPipe { 
    public transform(val: any, pipe: any) { 
    if (!pipe) return val; 

    switch (pipe) { 
     case 'p1': return val + '-p1'; 
     case 'p2': { 
     return new AnyPipe().transform(val, 'some args', 'maybe', '..'); 
     } 
     case 'p3': return val + '-p3'; 
     default: return val; 
    } 
    } 
} 

ライブデモ:https://plnkr.co/edit/V64fok5eFeHAHz8DB6DJ?p=preview

関連する問題