如何为 Angular 2 组件属性设置默认值？

Question

在编写 Angular 2.0 组件时，如何设置属性的默认值？

例如 - 我想默认将 foo 设置为 'bar'，但绑定可能会立即解析为 'baz'。这如何在生命周期挂钩中发挥作用？

@Component({  
    selector: 'foo-component'
})
export class FooComponent {
    @Input()
    foo: string = 'bar';

    @Input()
    zalgo: string;

    ngOnChanges(changes){
          console.log(this.foo);
          console.log(changes.foo ? changes.foo.previousValue : undefined);
          console.log(changes.foo ? changes.foo.currentValue : undefined);
    }
}

鉴于以下模板，这是我期望的值。我错了吗？

<foo-component [foo] = 'baz'></foo-component>

登录到控制台：

'baz'
'bar'
'baz'

<foo-component [zalgo] = 'released'></foo-component>

登录到控制台：

'bar'
undefined
undefined

Answer 1

这是一个有趣的话题。 您可以使用两个生命周期钩子来弄清楚它是如何工作的：ngOnChanges 和 ngOnInit。

基本上，当您将默认值设置为 Input 时，这意味着它只会在该组件上没有值的情况下使用。 并且有趣的部分会在组件被初始化之前被改变。

假设我们有这样的组件，其中包含两个生命周期钩子和一个来自 input 的属性。

@Component({
  selector: 'cmp',
})
export class Login implements OnChanges, OnInit {
  @Input() property: string = 'default';

  ngOnChanges(changes) {
    console.log('Changed', changes.property.currentValue, changes.property.previousValue);
  }

  ngOnInit() {
    console.log('Init', this.property);
  }

}

情况1

html 中包含的组件没有定义property 值

结果我们将在控制台中看到： Init default

这意味着onChange 未被触发。初始化被触发，property 的值是default，正如预期的那样。

情况2

组件包含在 html 中并设置了属性 <cmp [property]="'new value'"></cmp>

结果我们将在控制台中看到：

Changednew valueObject {}

Initnew value

这个很有趣。首先触发onChange钩子，将property设置为new value，之前的值为empty object！并且只有在那之后onInit 钩子才被property 的新值触发。

Answer 2

这是最好的解决方案。 （角度所有版本）

解决方案：为@Input 变量设置默认值。如果没有向该输入变量传递值，那么它将采用默认值。

我已经为此类类似问题提供了解决方案。你可以从here找到完整的解决方案

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);
  }
}