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
답변
흥미로운 주제입니다. 당신은 어떻게 작동하는지 알아 내기 위해 두 개의 라이프 사이클 후크 함께 놀러 수 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
정의 된 property
값 없이 HTML에 포함 된 구성 요소
결과적으로 콘솔에서 볼 수 있습니다.
Init default
그것은 의미 onChange
가 트리거되지 않았습니다. 초기화가 트리거되었으며 property
값이 default
예상대로입니다.
상황 2
setted 속성이있는 html에 포함 된 구성 요소 <cmp [property]="'new value'"></cmp>
결과적으로 콘솔에서 볼 수 있습니다.
Changed
new value
Object {}
Init
new value
그리고 이것은 흥미 롭습니다. 첫째 트리거 된 onChange
잘 살고 후크, property
에 new value
, 그리고 이전 값이었다 빈 객체 ! 그리고 그 onInit
후크가 새 값으로 트리거 된 후에 만 property
.
답변
여기에 가장 적합한 솔루션이 있습니다. (ANGULAR 모든 버전)
주소 지정 솔루션 : @Input 변수의 기본값 을 설정합니다 . 해당 입력 변수에 값이 전달되지 않으면 기본값을 사용합니다 .
나는 이런 종류의 비슷한 질문에 대한 해결책을 제공했습니다. 여기 에서 전체 솔루션을 찾을 수 있습니다.
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);
}
}