带有 ES5 的 Angular 2 中的管道 + 指令：在构造函数上找不到指令注释

Question

我有一个非常简单的管道：

app.DisplayKeystrokePipe = ng.core
    .Pipe({
        name: "displayKeystroke"
    })
    .Class({
        transform: function() {

        }
    });

还有一个更复杂的组件/指令：

app.DropDownCmp = ng.core
    .Component({
        selector: "dropdown",
        templateUrl: "dropdown.html",
        inputs: [
            'list',
            'selected'
        ],
        outputs: [
            'selectedChange'
        ]
    })
    .Class({
        constructor: function() {
            this.selectedChange = new ng.core.EventEmitter();
            this.display = "Hello";
            this.onClickHandler = function(event) {
                if(this.listVisible && !$(event.target).is(".dropdown-display") && !$(event.target).parents(".dropdown-display").length > 0) {
                    this.listVisible = false;
                }
            }.bind(this);
        },
        isSelected: function(id) {
            return id == this.selected;
        },
        show: function() {
            this.listVisible = true;
        },
        select: function(id) {
            this.selected = id;
            this.selectedChange.next(id);
        },
        ngOnInit: function() {
            document.addEventListener('click', this.onClickHandler)
        },
        ngOnDestroy: function() {
            document.removeEventListener('click', this.onClickHandler);
        },
        ngOnChanges: function(changes) {
            this.display = this.list[this.selected];
        },
    });

现在我正在尝试在一个模板中同时使用这两种功能：

app.SomeComponent = ng.core
    .Component({
        template: `<dropdown [list]="someList" [(selected)]="currentEntry"></dropdown><br>{{1 | displayKeystroke}}`,
        directives: [app.DropDownCmp],
        pipes: [app.DisplayKeystrokePipe]
    })
    .Class({
        constructor: [ng.router.RouteData, app.LinkService, function(rd, service) {
            service.setPath(rd.data.catName, rd.data.name);
            this.someList = ['Entry1', 'Entry2', 'Entry3'];
            this.currentEntry = 0;
        }]
    });

但是，我收到错误消息：EXCEPTION: No Directive annotation found on constructor

当我只在模板中使用指令时，它可以工作：

template: `<dropdown [list]="someList" [(selected)]="currentEntry"></dropdown>`

当我只使用管道时也是这样：

template: `{{1 | displayKeystroke}}`

只有当我同时使用两者时才会出现此错误。

我做错了什么？

编辑：Plunker：http://plnkr.co/edit/A0hnvvVC6oxZBqIE38Eu?p=preview

Answer 1

我想我发现了问题，在你的管道中你有这条线

constructor: function constructor() {}

那条线使它失败，如何以及为什么？遗憾的是我不能确定。但是如果你改变它以匹配类名，或者只是使用function() {} 就可以了。

app.DisplayKeystrokePipe = ng.core.Pipe({
    name: "displayKeystroke"
}).Class({

    // Match class name
    constructor: function DisplayKeystrokePipe () {},

    // or simply using function() {}
    //constructor: function() {},

    transform: function() {
        return "FIRED";
    }
});

奇怪的是，同样具有constructor: function constructor() {} 的指令不会发生这种情况。所以我会坚持constructor: function() {} 来避免问题。

这是您的plnkr 工作。