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？

1 个答案: