Hostbinding ngIf в Angular2

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>