angular - 如何设置 Angular 2 组件属性的默认值？

Question

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

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

@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

这是个有趣的话题。您可以尝试使用两个生命周期钩子(Hook)来弄清楚它是如何工作的:ngOnChanges和 ngOnInit .

基本上当您将默认值设置为 Input 时这意味着只有在该组件没有任何值(value)的情况下才会使用它。有趣的是，它将在组件初始化之前更改。

假设我们有这样的组件，有两个生命周期钩子(Hook)和一个来自 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);
  }

}

情况一

包含在 html 中但未定义的组件 property值(value)

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

这意味着 onChange没有被触发。 Init 被触发并且 property值为 default正如预期的那样。

情况二

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

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

Changed new value Object {}

Init new value

这个很有趣。首先被触发onChange钩子(Hook)，它设置了property至 new value ，之前的值为空对象!只有在那之后onInit新值 property 触发了钩子(Hook).