组件的 Angular 2 指令会覆盖 ng-content？

我有一个名为 ButtonComponent 的组件：

import { Component } from "angular2/core";

@Component({
    selector: 'btn',
    template: '<div class="btn"><ng-content></ng-content></div>'
})
export class ButtonComponent { }

和指令：

import { Directive, Input } from 'angular2/core';

@Directive({
    selector: 'btn[dialog-data]'
})
export class DialogButtonDirective {
    @Input('dialog-data') 
    public dialogData: any;
}

但如果我尝试像这样使用它：

<btn [dialog-data]="dart()">DART</btn>

然后按钮里面什么也没有。 为什么？当我不使用这个指令时，一切都很好。

好吧，这有点令人困惑，但我找到了答案。此代码不起作用，因为 DialogBu​​ttonDirective 在 ButtonComponent 之前的“指令”字段中声明。

所以我改变了这一点：

directives: [DialogButtonDirective, ButtonComponent]

To this:

directives: [ButtonComponent, DialogButtonDirective]

它解决了问题。谢谢！