Question

在Angular 2+中我有一个接受两个输入的组件

totalCarsNumber
availableCarsNumber

totalCarsNumber是强制性的，但availableCarsNumber不是

我正在寻找的是如何将availableCarsNumber的默认值设置为totalCarsNumber

我尝试了这个，但它没有工作：

@Input() totalCarsNumber: Number;
@Input() availableCarsNumber = this.totalCarsNumber;

Answer 1

在输入属性中使用属性设置器，我们可以检测并设置默认值

DATABSES = {
     'default' :{
         'ENGINE' : 'django.db.backends.mysql',
         'NAME'  :'MasterQuote',
         'USER'  : 'root',
         'PASSWORD' : 'root',
         'HOST' : 'localhost',
         'PORT' : ''
     }
}

我做了一个小演示，你可以查看它stackblitz

Answer 2

; TDLR通过Angular的@Input传递的值在组件初始化后变为可用，因此，ngOnInit中的totalCarsNumber值可用。因此，您必须使用ngOnInit来实现它。

可选输入需要使用问题后缀进行注释。 number类型应该是小写的。此外，我们将null设置为可选输入的默认值，以便稍后检查它是否已设置。

@Input() totalCarsNumber: number;
@Input() availableCarsNumber?: number = null;

然后我们可以使用ngOnInit来检查是否已在组件上提供this.availableCarsNumber的值，否则它将为null，然后我们将值设置为totalCarsNumber。

ngOnInit() {
  this.availableCarsNumber = this.availableCarsNumber === null ? this.totalCarsNumber : this.availableCarsNumber;
}

如何在Angular的另一个输入值中设置输入的默认值？

2 个答案: