tài sản Angular2 Boolean @Input nhận đặt làm chuỗi - ràng buộc thuộc tính lồng nhau

Question

Tôi có một thành phần bên ngoài với một tài sản:

Loading: Boolean = false; 

thành phần bên ngoài này là thiết lập thuộc tính này trên một thành phần lồng nhau:

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

khi tôi làm typeof (this.Loading) trên thành phần lồng nhau, tôi nhận được chuỗi, mà [những gì tôi tin] là những gì ném ra toàn bộ logic.

đây là thành phần lồng nhau của tôi:

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

chỉnh sửa - loại bỏ bit không liên quan

Answer 1

Nếu Loading là một giá trị boolean, sau đó sử dụng

[loading]="Loading" 

{{}} là chuỗi suy và kết quả sẽ luôn là một strin g.

Góc không biết về các thuộc tính boolean. Nếu bạn chỉ muốn biết nếu một tài sản được thiết lập hay không, bạn có thể sử dụng một setter như

isLoading:Boolean; 

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

và sử dụng nó như

<etp-loader loading> 

và isLoading sẽ được thiết lập để true