组件的Angular 2指令会覆盖ng-content吗? [英] Angular 2 Directive for a component overrides ng-content?

问题描述

我有一个名为ButtonComponent的组件:

I have a Component that is called 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;
}

但是，如果我尝试这样使用它:

But if I try to use it like this:

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

然后，按钮内没有任何内容. 为什么?当我不使用此指令时，一切都很好.

Then button have nothing inside of it. Why? When I'm not using this directive everything's fine.

推荐答案

好的，这有点令人困惑，但我找到了答案.该代码无效，因为DialogBu​​ttonDirective在ButtonComponent之前的指令"字段中声明.

OK, it's a bit confusing but I found the answer. This code isn't working because DialogButtonDirective declared in 'directives' field before ButtonComponent.

所以我改变了这个:

directives: [DialogButtonDirective, ButtonComponent]

对此:

directives: [ButtonComponent, DialogButtonDirective]

它解决了问题.谢谢！

这篇关于组件的Angular 2指令会覆盖ng-content吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！