angular - Angular2 複数のカスタム パイプ

Question

es5を使用してangular2アプリを構築しています。2 つの異なるリストをフィルタリングするための 2 つの検索入力フィールドがある 1 つの画面があります。

そのために、以下に示すように2つの異なるパイプを定義しました

(function(app) {
    app.filterPipe1 = ng.core.Pipe({
        name : "filter1",
        pure:true
    }).Class({
        constructor : function() {
        }, // <<< ---
        transform : function(values, args) {
        return values.filter(function(value) {
                    return value.title.toLowerCase().startsWith(args[0].toLowerCase());
                });
        }
    });
})(window.app || (window.app = {}));


(function(app) {
    app.filterPipe2 = ng.core.Pipe({
        name : "filter2",
        pure:true
    }).Class({
        constructor : function() {
        }, // <<< ---
        transform : function(values, args) {


                return values.filter(function(value) {
                    return value.title.toLowerCase().startsWith(args[0].toLowerCase());
                });

        }
    });
})(window.app || (window.app = {}));

component1.js

app.component1 = ng.core
        .Component(
                {
                    directives : [ ng.router.ROUTER_DIRECTIVES,
                            app.componenttest ],
                    pipes : [ app.filterPipe1,app.filterPipe2 ],
                    templateUrl : 'test1.html'
                })

実行時に「パイプが見つかりません」というエラーが発生します

また興味深いのは、コンポーネントのパイプから宣言のいずれかを削除すると、機能していることです。

更新しました

以下のようにhtmlで使用されるフィルター

    <input type="text" placeholder="Search"
                                            [(ngModel)]="inputSearch1">

<li
                                        *ngFor="#category of categoryList |  filter1:inputSearch1 #i=index">





    <input type="text" placeholder="Search"
                                            [(ngModel)]="inputSearch2">

<li
                                        *ngFor="#objective of objectiveList |  filter2:inputSearch2 #i=index">

誰もこの問題に直面しましたか?