Angular2布尔@Input属性设置为字符串 - 绑定嵌套属性

Question

我有一个带有属性的外部组件:

Loading: Boolean = false;

此外部组件在嵌套组件上设置此属性:

<etp-loader text="loading..." loading="{{Loading}}"></etp-loader>

当我在嵌套组件上做typeof(this.Loading)时,我得到了字符串,[我相信]是抛出整个逻辑的东西.

这是我的嵌套组件:

import { Component, AfterViewInit, OnInit, Input} from '@angular/core'
@Component({
    selector: 'etp-loader',
    template: `<div *ngIf="loading" class="progress" style="margin-left: 10%; margin-right: 10%;">
                <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                        aria-valuemax="100" style="width:100%;">
                        {{text}}
                </div>
                </div>`
})
export class EtpLoaderComponent {
    @Input()
    text: string;

    @Input()
    loading: Boolean;    

    ngOnInit() {
        console.debug('init: loader state: ', 
                       this.loading, 
                       typeof(this.loading)); // => init: loader state:  false string
    }
}

编辑 - 删除不相关的位

Answer 1

如果Loading是布尔值,则使用

[loading]="Loading"

{{}} 是字符串插值,结果将始终是一个字符串.

Angular不了解布尔属性.如果您只想知道是否设置了属性,可以使用类似的setter

isLoading:Boolean;

@Input()
loading set(value: Boolean) {
  this.isLoading = value != 'false';
}

并使用它

<etp-loader loading>

并将isLoading设置为true