angular - 带有 ES5 的 Angular 2 中的管道+指令 : No Directive annotation found on constructor

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;
        }]
    });

但是，我收到错误消息:异常:在构造函数上找不到指令注释

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

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";
    }
});

奇怪的是，对于也有构造函数:function constructor() {}的指令，这种情况不会发生。因此，我只是坚持使用 constructor: function() {} 以避免出现问题。

这是您的plnkr工作。