离子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自己的组件

回答

相关问题