하위컴포넌트 인스턴스를 얻을 수 있으면 인스턴스의 프로퍼티에 접근할 수 있어 편리하다.
하위 인스턴스를 얻는 방법
- @ViewChild
- @ContentChild ( 컨텐츠 프로젝션 )
- 템플릿변수
@ViewChild, @ContentChild 방법은 단점이 존재하는데 인스턴스를 받는 시점이 하위컴포넌트 constructor가 아닌 라이프사이클후킹메소드이기때문에 바로 사용할 수 없다.
템플릿변수는 인스턴스를 얻는 시점과 관계없이 템플릿코드내에서 인스턴스처럼 사용이 가능하다.
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<app-countdown-timer #timer></app-countdown-timer>이 방법은 분명 편하지만 템플릿에서만 접근이 가능하다는 단점이 있어 상위컴포넌트 클래스코드에서는 사용할 수 없다는 단점이 있다.
@ViewChild를 사용하면 ngAfterViewInit()후킹메소드에서 seconds변수를 하위인스턴스의 seconds로 할당해야 하는데 ngAfterViewInit후킹함수는 뷰상태를 변경한후 호출되기때문에 여기서 변수상태를 다시 변화시키면 앵귤러는 에러를 발생시킨다.
따라서 한사이클을 경과시키는
setTimeout(() => {this.seconds = ()=> this.timerComponent.seconds}, 0);를 사용해야 한다.
이 방법은 불편한 점이 있지만 상위 클래스코드에서 하위인스턴스를 다룰수 있다는 장점이 있다.
