typescript 如何在 Angular2 中为@Input 设置默认参数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35839120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set default parameter for @Input in Angular2?
提问by jasonslyvia
Say I have a component that will display a nameproperty, 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 nameproperty?
问题是，[noname]当有人使用此组件但未传递任何name属性时，我如何显示？
The only solution comes to mind is using logic operator inside template like {{ name || '[noname]' }}.
想到的唯一解决方案是在模板中使用逻辑运算符，例如{{ name || '[noname]' }}.
回答by Качалов Тимофей
try
尝试
@Input() name: string = 'noname';
回答by dee zg
You can intercept @Input()with a setter and have it backed by a private field. In setter, you do a nullcheck so field gets set only to a non-null value. As last, you bind your template to a private fied in which you have set initial value.
您可以@Input()使用 setter进行拦截，并使其由私有字段支持。在 setter 中，您执行空检查，因此字段仅设置为非空值。最后，将模板绑定到已设置初始值的私有字段。
回答by michabbb
with angular 8 and the default tslint settingsyour IDE will notice:
使用 angular 8 和默认的 tslint 设置，您的 IDE 会注意到：
so it′s okay to just write:
所以可以这样写：
@Input() addclass = '';
without any "type annotation".
没有任何“类型注释”。
回答by user9037059
In the component you should initialize like:
在组件中，您应该像这样初始化：
@Input () name:String='';
In the HTML you can use:
在 HTML 中，您可以使用：
{{ name ===''? 'empty string': name }}
回答by Farasi78
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]' 或在名称通过时插入名称。
回答by Parth Devloper
Here is the proper solution to this. (ANGULAR 2 to 9)
这是对此的正确解决方案。（角度 2 到 9）
Addressing solution: To set a default value for @Input variable. If no value passed to that input variable then It will take the default value.
解决方案：为@Input 变量设置默认值。如果没有值传递给该输入变量，则它将采用默认值。
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. But you want that isBike and Wheels properties must have a default value (ie.. isBike: true, wheels: 2)
您创建了一个名为 app-bike 的组件，您需要在其中使用 angular 的 @input 装饰器传递自行车的属性。但是你希望 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);
}
}
For more detailed article refer to this.
有关更详细的文章，请参阅此。
Refer Destructuring assignment from here
从这里参考解构赋值
