Angular2中的主機綁定ngIf

Question

考慮這個子組件：

@Component({
    selector: 'mySelector',
    template: `<ion-spinner [ngIf]="ngif"></ion-spinner>`
})


export class MyDirective {

    ngif: boolean;
    constructor() {}

    @Input() serverWaiting:boolean = true;
    @HostBinding('ngIf')

    ngOnChanges() {
        this.ngif = !this.serverWaiting ? true : null;
    }

主機組件的模板：

 <mySelector [serverWaiting]></mySelector>

主機組件：

@Component({
    templateUrl: 'hostComp.html',
    directives: [myDirective]
})

export class HostComp {
    serverWaiting = true;
}

然而，Spinner沒有顯示。 知道我做錯了什么嗎？

資料來源： https ： //angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

Answer 1

@HostBinding('ngIf')裝飾器需要在屬性之前具有應綁定的值。

export class MyDirective {
    constructor() {}

    @HostBinding('ngIf')
    ngif: boolean;

    @Input() serverWaiting:boolean = true;

    ngOnChanges() {
        this.ngif = !this.serverWaiting ? true : null;
    }
}

此代碼看起來不合適

<mySelector [serverWaiting]></mySelector>

[serverWaiting]表示屬性綁定但不綁定值。 如果您希望這樣，則不會指定true 。 你需要

<mySelector [serverWaiting]="true"></mySelector>