Angular 2 Directive for a component overrides ng-content?

问题

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 { }

and Directive:

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.

回答1:

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

So I've changed this:

directives: [DialogButtonDirective, ButtonComponent]

To this:

directives: [ButtonComponent, DialogButtonDirective]

And it solved the problem. Thanks!

来源：https://stackoverflow.com/questions/37416344/angular-2-directive-for-a-component-overrides-ng-content