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工作。

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

1 个答案: