ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 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(', '));

      }

    }

    VersionParentComponentminormajor 값을 제공하고 변경하는 메서드에 버튼을 바인딩합니다.

    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;

      }

    }

    다음은 버튼을 누르는 과정의 출력 결과입니다.


    댓글

Designed by Tistory.