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

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

1 个答案: