假设我有一个显示name
属性的组件,所以它大致如下:
import {Component, Input} from 'angular2/core';
@Component({
selector: 'demo',
template: `<div>{{name}}</div>`,
styles: [``],
})
export class Demo {
@Input() name: string;
}
&#13;
问题是,当有人使用此组件但未传递任何[noname]
属性时,如何显示name
?
唯一的解决方案是在{{ name || '[noname]' }}
等模板中使用逻辑运算符。
答案 0 :(得分:41)
尝试
@Input() name: string = 'noname';
答案 1 :(得分:2)
答案 2 :(得分:1)
您可以使用setter拦截@Input()
并使其受私有字段支持。在setter中,您执行nullcheck,因此字段仅设置为非null值。最后,将模板绑定到已设置初始值的私有模式。
答案 3 :(得分:0)
我认为您可以使用您使用模板的想法。所以它会是:
在组件中:
@Input () name:String;
在模板中:
<div>{{ name != '' ? name : '[no name]' }}</div>
这将检查名称是否为空,并使用&#39; [no name]&#39;或者如果传递名称,则插入名称。
答案 4 :(得分:0)
在组件中,您应该初始化如下:
@Input () name:String='';
在HTML中,您可以使用:
{{ name ===''? 'empty string': name }}
答案 5 :(得分:0)
这是对此的正确解决方案。 (角度2到9)
寻址解决方案:为@Input变量设置默认值。如果没有值传递给该输入变量,则它将采用默认值。
示例:
我有一个名为bike的对象接口:
export interface bike {
isBike?: boolean;
wheels?: number;
engine?: string;
engineType?: string;
}
您制作了一个名为app-bike的组件,需要在该组件中使用@input的angular装饰器传递bike的属性。但您希望isBike和Wheels属性必须具有默认值(即isBike:true,wheels:2)
export class BikeComponent implements OnInit {
private _defaultBike: bike = {
// default isBike is true
isBike: true,
// default wheels will be 2
wheels: 2
};
@Input() newBike: bike = {};
constructor() {}
ngOnInit(): void {
// this will concate both the objects and the object declared later (ie.. ...this.newBike )
// will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT
this.newBike = { ...this._defaultBike, ...this.newBike };
// console.log(this.newBike);
}
}
有关详细文章,请参见this。
从here引用销毁结构分配