2017-02-07 32 views
1

我正在查看是否可以採用代表角管道名稱的字符串並在模板中解析它。例如:Angular2:將一個字符串解析爲一個管道

//Component: 
pipe = 'date' 

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

在上面的例子中,是沒有辦法,我可以解決這個字符串,可以在模板中使用的實際管的方式。有沒有更好的方法來動態應用管道?

這裏的用例是讓組件的用戶決定使用哪種格式的值(如果有的話)。

更新

結束了與接受管道名稱來執行作爲一個字符串,以及其他任何可能的格式爲它定製的管道去。這裏是一個片段,其中的管道可能是「日期」和格式可能是「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