在Angular2中主机绑定ngIf [英] Hostbinding ngIf in Angular2

问题描述

考虑此子组件:

@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;
}

但是，未显示微调框.知道我在做什么错吗?

Yet, the Spinner is not shown. Any idea what I am doing wrong?

来源: https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

推荐答案

@HostBinding('ngIf')装饰器必须位于具有应绑定值的属性之前.

The @HostBinding('ngIf') decorator needs to be before the property with the value that should be bound.

export class MyDirective {
    constructor() {}

    @HostBinding('ngIf')
    ngif: boolean;

    @Input() serverWaiting:boolean = true;

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

此代码无效

<mySelector [serverWaiting]></mySelector>

[serverWaiting]表示属性绑定，但不绑定值.万一您期望，它不会分配true.您将需要

[serverWaiting] indicates property binding but doesn't bind a value. This doesn't assign true in case you expect that. You would need

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

这篇关于在Angular2中主机绑定ngIf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！