離子Angular2自己的組件

我的組件的HTML：離子Angular2自己的組件

<div> 
    {{text}} 
    {{percentLeft}} 
    {{innerColor}} 
</div>

我Component的TS文件

import { Component,Input } from '@angular/core'; 

/** 
* Generated class for the TimeLeftBarComponent component. 
* 
* See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html 
* for more info on Angular Components. 
*/ 
@Component({ 
    selector: 'time-left-bar', 
    templateUrl: 'time-left-bar.html' 
}) 
export class TimeLeftBarComponent { 
    @Input('text') text: string; 
    @Input('percentLeft') percentLeft: number; 
    @Input('innerColor') innerColor: string; 

    constructor() {} 

}

我如何調用此組件：

<time-left-bar [percentLeft]="50" [text]="text" [innerColor]="black"> 
</time-left-bar>

這只是顯示我輸入的第一個參數，

例如：

<time-left-bar [percentLeft]="50" [text]="text" [innerColor]="black"> 
</time-left-bar>

輸出只是50

<time-left-bar [text]="text" [innerColor]="black" [percentLeft]="50"> 
</time-left-bar>

輸出只是text

<time-left-bar [innerColor]="black" [percentLeft]="50" [text]="text"> 
</time-left-bar>

輸出只是black

我在做什麼錯？

來源

2017-07-19 Vor Name

如果你像這樣改變它會發生什麼：首先聲明一個帶有數字值的屬性：'public aNumber = 50'然後在視圖中''？由於'text'和'innerColor'只是字符串，所以你不需要屬性綁定（請注意，不是發送'text'而是用單引號發送''text''）。 – sebaferreras

其與單引號ty一起工作！ –

如果答案解決了問題，您能否將其標記爲已接受的答案，以便我們能夠解決問題？謝謝：） – sebaferreras

如果添加[]，則Angular會將該值評估爲表達式。當組件的類上沒有該名稱的屬性，或者沒有值時，則會導致未定義或爲空。

所以，如果你只是想發送的text和innerColor一個字符串值，使用單引號：

<time-left-bar ... [text]="'text'" [innerColor]="'black'"></time-left-bar>

一個更好的辦法是不是爲這些值的屬性，並使用該名稱（不單引號）：

public aNumber = 50; 
public aText = 'some text'; 
public aColor = 'black';

並在視圖：

<time-left-bar [text]="aText" [innerColor]="aColor" [percentLeft]="aNumber"> 
</time-left-bar>

來源

2017-07-19 15:31:03 sebaferreras

離子Angular2自己的組件

回答

相關問題