[英]How to set default parameter for @Input in Angular2?
Say I have a component that will display a name
property, so it roughly goes like this:假设我有一个将显示
name
属性的组件,所以它大致是这样的:
import {Component, Input} from 'angular2/core'; @Component({ selector: 'demo', template: `<div>{{name}}</div>`, styles: [``], }) export class Demo { @Input() name: string; }
The problem is, how could I display [noname]
when someone using this component but not passing any name
property?问题是,当有人使用这个组件但没有传递任何
name
属性时,我怎么能显示[noname]
呢?
The only solution comes to mind is using logic operator inside template like {{ name || '[noname]' }}
想到的唯一解决方案是在模板中使用逻辑运算符,如
{{ name || '[noname]' }}
{{ name || '[noname]' }}
. {{ name || '[noname]' }}
。
尝试
@Input() name: string = 'noname';
You can intercept @Input()
with a setter and have it backed by a private field.您可以使用 setter 拦截
@Input()
并使其由私有字段支持。 In setter, you do a nullcheck so field gets set only to a non-null value.在 setter 中,您执行空检查,因此字段仅设置为非空值。 As last, you bind your template to a private fied in which you have set initial value.
最后,将模板绑定到已设置初始值的私有字段。
In the component you should initialize like:在组件中,您应该像这样初始化:
@Input () name:String='';
In the HTML you can use:在 HTML 中,您可以使用:
{{ name ===''? 'empty string': name }}
I think you can use your idea of using the template.我认为您可以使用您使用模板的想法。 So it would be:
所以它会是:
In Component:在组件中:
@Input () name:String;
In Template:在模板中:
<div>{{ name != '' ? name : '[no name]' }}</div>
That would check to see if the name is empty, and use '[no name]' or insert the name if the name is passed.这将检查名称是否为空,并使用 '[no name]' 或在名称被传递时插入名称。
Here is the proper solution to this.
这是对此的正确解决方案。 (ANGULAR 2 to 9)
(角度 2 到 9)
Addressing solution: To set a default value for @Input variable.解决方案:为@Input 变量设置默认值。 If no value passed to that input variable then It will take the default value.
如果没有值传递给该输入变量,则它将采用默认值。
Example:例子:
I have an object interface named bike:我有一个名为自行车的对象接口:
export interface bike {
isBike?: boolean;
wheels?: number;
engine?: string;
engineType?: string;
}
You made a component named app-bike where you need to pass the properties of bike with @input decorator of angular.您创建了一个名为 app-bike 的组件,您需要在其中使用 angular 的 @input 装饰器传递自行车的属性。 But you want that isBike and Wheels properties must have a default value (ie.. isBike: true, wheels: 2)
但是你希望 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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.