Angular - 如何为可选输入属性设置默认值 [英] Angular - How to set default values for optional input properties

问题描述

我想知道在 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.

目前我有这样的事情:

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

当传递的值为空/未定义时，是否有一种优雅的方法也可以设置默认值，或者我需要像这样检查 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;
}

感觉有一些方法可以做到这一点.对我来说，可选属性意味着值可能丢失、为空或未设置，但是当我想设置默认值时，它仅在属性丢失或为空时才有效.在这些情况下，它仍然将 value 设置为 null 或 undefined，这似乎令人困惑.

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.

推荐答案

这是针对此的正确最佳解决方案.(角度 7,8, 9)

寻址解决方案:为@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 的组件，您需要在其中使用 @input 角度装饰器 传递汽车的属性.但是您希望 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);
  }
}

有关更详细的文章，请参阅this.

For more detailed article refer this.

从这里参考解构赋值

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