ngOnChanges가 필요하지 않을 수 있습니다.

"ngOnChanges"는 @Input 소품이 변경될 때 Angular 구성 요소가 알 수 있는 수명 주기 후크입니다. ngOnChanges 사용의 주요 단점은 단일 소품을 보기 위해 훨씬 더 많은 코드를 작성해야 한다는 것입니다.

Angular 팀은 intercept the property changes by setter 에 대한 또 다른 방법을 제공합니다. setter 기술을 순진하게 사용한다면 getter/setter 쌍과 중복 개인 변수를 작성하는 것이 지루하다는 것을 알게 될 것입니다.

이 기사에서는 setter 기술을 npm 모듈로 개선하는 방법을 공유하고 싶습니다 - subjectize .

용법

카운터 구성 요소를 만들고 있고 카운트가 변경될 때마다 무언가를 하고 싶다고 가정해 보겠습니다. 아래와 같이 3가지 버전의 구현이 있을 수 있습니다(발췌).

1) ngOnChanges에 의해

class CounterComponent implements OnChanges {
  @Input()
  count: number;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.count) {
      // do something
    }
  }
}

2) 순진한 세터로

class CounterComponent {
  @Input()
  get count(): number {
    return this._count;
  }

  set count(value) {
    this._count = value;
    // do something
  }

  private _count: number;
}

3) 주제화하여

class CounterComponent implements OnInit {
  @Input()
  count: number;

  @Subjectize("count")
  count$ = new ReplaySubject(1);

  ngOnInit() {
    this.count$.subscribe(() => {
      // do something
    });
  }
}

이러한 간단한 시나리오에서는 공정해 보일 수 있지만 몇 가지 입력 소품을 보고 있으면 상황이 달라집니다. ngOnChanges의 경우 논리가 많습니다. 순진한 설정자에게는 지루한 개인 변수가 많이 있습니다.

Subjectize는 또한 정신적으로 직접적인 접근 방식입니다. RxJS Subject를 선언하고 변경 사항에 대해 Subject를 구독하면 됩니다.

마법

Subjectize는 TypeScript 속성 데코레이터입니다. 내부적으로는 순진한 setter 구현과 마찬가지로 지정된 Input prop에 대한 내부 getter/setter를 생성합니다. Subjectize 자체는 RxJS에만 의존하므로 Angular가 없는 모든 ES6 클래스에서 사용할 수 있습니다. 간단한 상태 관리에도 사용할 수 있습니다.

말할 것도 없이, 신뢰성을 유지하기 위해 해야 할 일이 더 있습니다. 관심이 있는 경우 source code 을 참조하십시오.

결론

JavaScript getter/setter는 Input props를 보는 데 사용할 수 있으며 subjectize 그렇게 하는 데 도움이 됩니다. ngOnChanges가 지겹다면 subjectize 시도하십시오!