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

Question

我有一个名为 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>

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

Answer 1

好吧，这有点令人困惑，但我找到了答案。此代码无效，因为 DialogButtonDirective 在 ButtonComponent 之前的 'directives' 字段中声明。

所以我改变了这个：

directives: [DialogButtonDirective, ButtonComponent]

为此：

directives: [ButtonComponent, DialogButtonDirective]

它解决了问题。谢谢！

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

Angular 2 Directive for a component overrides ng-content?

javascript

directive

angularjs

angular