角度-如何为可选输入属性设置默认值

问题描述

我想知道在Angular组件中为可选属性设置默认值的"Angular/Typescript方法"是什么?当传递给可选属性的值是null或undefined时，我会遇到麻烦.

I wonder what is the "Angular/Typescript way" to set up default values for optional properties in Angular component? I am having troubles when values passed to optional properties are null or undefined.

目前，我有这样的事情:

Currently I am having something like this:

export class FooComponent implements OnInit {
  @Input() foo = 'foo';
  @Input() bar = 0;
  @Input() baz?: string;
}

如果声明默认值，则不必指定类型，因为它是分配值的类型，默认情况下属性是可选的. bar和foo属性就是这种情况.

If you declare default value, you dont have to specify type since it is type of assigned value and property is optional by default. This is the case of bar and foo properties.

或者，您可以使用?标记此属性为可选，但您不能声明其默认值. baz属性就是这种情况.

Alternatively you can use ? to mark that this property is optional but you cant declare its default value. This is the case of baz property.

现在，让我们看看将不同的值传递给这些属性时会发生什么.

Now let us see what happens when you pass different values to those properties.

<app-foo-component
  [foo]
  [bar]="null"
  [baz]="undefined"
>
</app-foo-component>

如果我通过控制台记录这些属性，这就是我得到的:

if I console log these properties, this is what I got:

foo将正确地是'foo'

bar将为null

baz将是undefined

当传递的值为null/undefined时，是否有一种优雅的方法还可以设置默认值?或者我需要像这样在OnInit中进行检查吗?

Is there a elegant way to also set default values when passed values are null/undefined or do I need some checking in OnInit like this?

OnInit() {
  this.bar = this.bar || 0;
}

感觉有某种方法可以做到这一点.对我来说，可选属性意味着值可能丢失，为null或未设置，但是当我要设置默认值时，它仅在属性丢失或为空时才起作用.在这种情况下，它仍将值设置为null或未定义，这似乎令人困惑.

It feels like there is some way to do this. To me, optional property means that value could be missing, null or unset but when I want to set default value, it only works when property is missing or empty. It still set value as null or undefined in these cases and that seems to be confusing.

推荐答案

寻址解决方案:要为@Input变量设置默认值.如果没有值传递给该输入变量，则它将采用默认值.

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.

示例:

我有一个名为car的对象接口:

I have an object interface named car:

export interface car {
  isCar?: boolean;
  wheels?: number;
  engine?: string;
  engineType?: string;
}

您制作了一个名为 app-car 的组件，您需要在其中使用 @angular输入装饰器 传递car的属性.但是您希望 isCar 和 Wheels 属性必须具有默认值(即isCar:true，wheels:4)

You made a component named app-car where you need to pass the properties of car with @input decorator of angular. But you want that isCar and Wheels properties must have a default value (ie.. isCar: true, wheels: 4)

您可以按照以下代码为该对象设置默认值:

You can set a default to that object as per below code:

export class CarComponent implements OnInit {
  private _defaultCar: car = {
    // default isCar is true
    isCar: true,
    // default wheels  will be 4
    wheels: 4
  };

  @Input() newCar: car = {};

  constructor() {}

  ngOnInit(): void {

   // this will concate both the objects and the object declared later (ie.. ...this.newCar )
   // will overwrite the default value. ONLY AND ONLY IF DEFAULT VALUE IS PRESENT

    this.newCar = { ...this._defaultCar, ...this.newCar };
   //  console.log(this.newCar);
  }
}

有关详细文章，请参考此.

For more detailed article refer this.

从此处引用解构分配

这篇关于角度-如何为可选输入属性设置默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！