부모 구성 요소와 자식 구성 요소 간의 각도 양방향 바인딩

Angular에서는 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 방법이 잘 알려져 있습니다. 내가 보여주고 싶은 것은 양방향 바인딩이 있는 Angular에서 필요할 때 자식의 변경 사항이 부모에게도 전파되도록 보장할 수 있는 방법입니다.

작업 예제를 보려면 stackblitz 을 확인하십시오.

먼저 입력 속성을 살펴보겠습니다!

@Component({
  selector: 'child',
  templateUrl: './child.html'
})
export class ChildComponent {
  //Input() decorator means that 
  //we can pass parameters to this component
  @Input() count: number;
}

다음과 같이 부모 구성 요소에서 사용할 수 있습니다.

<child [count]="counterOnParent">

이것이 의미하는 바는 부모가 자식 구성 요소로 전달되는 변수(counterOnParent)를 수정할 때마다 자식도 입력(@Input()) 변수에서 새 값을 수신한다는 것입니다.

좋아, 지금까지 너무 좋아.

그래도 자식 구성 요소에서 변수를 수정하면 부모의 변수는 어떻게 될까요?

@Component({
  selector: 'child',
  templateUrl: './child.html'
})
export class ChildComponent {
  @Input() count: number;

  //What will happen to the value in the parent? 
  increment(): void {
    this.count += 1;
  }
}

문제

글쎄요... 아무것도 아닙니다. 부모는 자식에서 이루어진 이 변경 사항에 대한 알림을 받지 않습니다. 부모에서 수정하지 않는 한 문제가 되지 않을 수 있습니다. 이로 인해 stackblitz 의 첫 번째 예에서 볼 수 있는 이상한 결과가 발생할 수 있습니다.

정확히 어떤 일이 일어나는지 예를 들어 몇 가지 유사 코드를 살펴보겠습니다.

parent.increment();//parent.count: 1, child.count: 1
parent.increment();//parent.count: 2, child.count: 2
child.increment(); //parent.count: 2, child.count: 3
child.increment(); //parent.count: 2, child.count: 4
parent.increment();//parent.count: 3, child.count: 3

마지막 줄에서 자식 수가 부모 상태와 일치하도록 되돌아가는 방법에 유의하십시오.

이 문제는 우리가 서로 다른 두 가지 상태(하나는 부모 상태, 다른 하나는 자식 상태)를 관리하고 동기화되지 않기 때문에 발생한다는 사실을 눈치채셨을 것입니다. 자식의 값을 수정함으로써 우리는 이 경우 Angular가 기대하는 일반적인 데이터 흐름(부모에서 자식으로)을 깨고 있습니다. 부모에게 자녀가 아닙니다.

해결책

상위에서 하위로 데이터 변경 흐름을 유지하는 것이 가장 좋습니다.
이것은 양방향 바인딩이 들어오는 곳입니다. 다행스럽게도 Angular에서 일반적으로 사용되는 패턴이므로 생성에 대한 규칙이 있습니다.

입력 변수와 이름이 같지만 "Change"라는 단어가 추가된 EventEmitter를 만듭니다.

@Component({
  selector: 'child',
  templateUrl: './child.html'
})
export class ChildComponent {
  @Input() count: number;
  @Output() countChange = new EventEmitter<number>();

  increment(): void {
    this.countChange.emit(this.count + 1);
  }
}

이제 부모의 사용법은 다음과 같습니다.

<child [(count)]="counterOnParent">

보시다시피 입력 속성에 대한 바인딩(대괄호)과 이벤트에 대한 바인딩(둥근 괄호)에 대한 구문을 결합하고 있습니다. Angular가 이해하는 이 규칙을 사용했기 때문에 부모에 실제 이벤트 이름을 지정할 필요가 없습니다!

이제 자식 구성 요소가 변수 값을 변경하려고 할 때마다 직접 수정하는 대신 변수를 변경하고 올바른 데이터 흐름 방향으로 적절하게 전파하는 이벤트를 부모에게 보냅니다.

stackblitz 의 두 번째 예에서 이를 확인할 수 있습니다.

해피 코딩 :-)