-
04 컴포넌트 상호작용 03앵귤러/03 템플릿&데이터 바인딩 2017. 8. 22. 21:51
ngOnChanges ()로 입력 속성 변경 가로채기
OnChanges 라이프 사이클 후크 인터페이스의 ngOnChanges() 메소드를 사용하여 프로퍼티 값을 변경하는 것을 감지하고 이에 대처합니다.
이 VersionChildComponent는, major 및 minor 입력 프롭퍼티의 변경을 검출하여 변경을 리포트하는 로그 메세지를 작성합니다.
component-interaction/src/app/version-child.component.ts
import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
@Component({
selector: 'version-child',
template: `
<h3>Version {{major}}.{{minor}}</h3>
<h4>Change log:</h4>
<ul>
<li *ngFor="let change of changeLog">{{change}}</li>
</ul>
`
})
export class VersionChildComponent implements OnChanges {
@Input() major: number;
@Input() minor: number;
changeLog: string[] = [];
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
let log: string[] = [];
for (let propName in changes) {
let changedProp = changes[propName];
let to = JSON.stringify(changedProp.currentValue);
if (changedProp.isFirstChange()) {
log.push(`Initial value of ${propName} set to ${to}`);
} else {
let from = JSON.stringify(changedProp.previousValue);
log.push(`${propName} changed from ${from} to ${to}`);
}
}
this.changeLog.push(log.join(', '));
}
}
VersionParentComponent는 minor와 major 값을 제공하고 변경하는 메서드에 버튼을 바인딩합니다.
component-interaction/src/app/version-parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'version-parent',
template: `
<h2>Source code version</h2>
<button (click)="newMinor()">New minor version</button>
<button (click)="newMajor()">New major version</button>
<version-child [major]="major" [minor]="minor"></version-child>
`
})
export class VersionParentComponent {
major = 1;
minor = 23;
newMinor() {
this.minor++;
}
newMajor() {
this.major++;
this.minor = 0;
}
}
다음은 버튼을 누르는 과정의 출력 결과입니다.
'앵귤러 > 03 템플릿&데이터 바인딩' 카테고리의 다른 글
04 컴포넌트 상호작용 05 (0) 2017.08.22 04 컴포넌트 상호작용 04 (0) 2017.08.22 04 컴포넌트 상호작용 02 (0) 2017.08.22 04 컴포넌트 상호작용 01 (0) 2017.08.22 03 라이프사이클 후크(Lifecycle hooks) 08 (0) 2017.08.20