具有模板和数据绑定的组件指令

Question

在Angular2中，是否可以将下面的内容输入指令？

<button [attr.disabled]="!infoForm.valid"></button>

e.g。稍后：

<button [isValid]="!infoForm.valid"></button>

修改

是否有可能最终得到一个更复杂的指令：？

@Component({
    selector: 'isValid',
    template: `
    <div>
        <button primary class="primary" (click)="next($event)">{{title}}</button>
    </div>`
})

export class ContinuationCheckDirective {

    @Input() isValid:boolean = false;

    @HostBinding('attr.disabled')
    disabled: boolean;

    ngOnChanges() {
        this.disabled = !this.isValid;
    }

    next() { // dostuff }

然后在父组件中：

 <continuationCheckDirective [isValid]="!addresForm.valid"></continuationCheckDirective>

Answer 1

@Directive({
  selector: '[isValid]'
})
class IsValidDirective {

  @Input() isValid:boolean = false;

  @HostBinding('attr.disabled')
  disabled: boolean;

  ngOnChanges() {
    this.disabled = !this.isValid;
  }
}

Plunker example