angular - Ionic Angular2 egen komponent

Min komponent html:

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

Min Komponents TS-fil

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() {}

}

Hur jag kallar denna komponent:

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

Det visar bara den första parametern jag anger,

till exempel:

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

Ger bara 50

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

Returnerar endast text

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

Returnerar endast black

Vad gör jag för fel?

Svar #1

Om du lägger till [] så utvärderar Angular värdet som ett uttryck. När det inte finns någon egenskap med det namnet på din komponents klass eller om den inte har något värde kommer det att resultera i undefined eller null.

Så om du bara vill skicka ett strängvärde för text och innerColor, använd enkla citattecken:

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

Ett bättre tillvägagångssätt skulle vara att skapa egenskaper för dessa värden istället och använda det namnet (utan enkla citattecken):

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

Och i vyn:

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