如何设置角度2组件属性的默认值？

在编写 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
177914 次浏览
小开
最佳答案

这是个有趣的话题。 您可以使用两个生命周期挂钩来弄清楚它是如何工作的: 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>的组件

因此，我们将在控制台中看到:

Changed new value Object {}

Init new value

这个很有意思。首先触发 onChange挂钩，将 property设置为 new value，以前的值是 空的物体！只有在那个 onInit钩子被触发了新的价值的 property。

小开

这是最好的解决方案

寻址解决方案 : 到 设置@Input 变量的默认值 。如果 < strong > 没有值传递给输入变量 ，然后它将采用默认值。

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

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

提交答案