我的组件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
我做错了什么?
答案 0 :(得分:1)
如果添加[],则Angular会将值计算为表达式。什么时候 在您的组件类或它上面没有具有该名称的属性 没有值,那么它将导致undefined或null。
因此,如果您只想为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>