离子Angular2拥有组件

时间:2017-07-19 12:50:54

标签: angular typescript ionic2 ionic3

我的组件html:

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

我的组件的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

我做错了什么?

1 个答案:

答案 0 :(得分:1)

  

如果添加[],则Angular会将值计算为表达式。什么时候   在您的组件类或它上面没有具有该名称的属性   没有值,那么它将导致undefined或null。

因此,如果您只想为textinnerColor发送字符串值,请使用单引号:

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