현재 회사에서 맡은 개발 파트 상 컴포넌트를 만들어 웹, 모바일에서 가져다 사용하고 웹에서는 이를 일괄적으로 인쇄할 수 있는 기능을 제공해야 한다. 각 페이지마다 작성되어 있어 인쇄 기능은 제공되지 않은 상태였는데, 개발팀 동료분과 함께 이를 컴포넌트화하여 코드를 리팩토링 했었다. 컴포넌트를 가져다 사용하고 해당 컴포넌트에 id를 부여해 ViewChild를 이용해 DOM element를 print service에 parameter로 넘겨주는 방식을 설계했다. (ViewChild로 DOM element를 가져오려면 Return Type을 ElementRef로 지정하면 된다.)
그런데 동료분이 계속 ViewChild가 분명 id를 맞게 써주었는데도 시점에 무관하게 nativeElement이 undefined라며 포기하고 나에게 넘겼었다. 그래서 서치하다가 알아냈던 사실은 read property를 이용하여 template을 inject할 대상을 명시할 수 있다는 것이다.
@ViewChild('element', { read: ElementRef }) element: ElementRef;read property를 ElementRef로 지정하지 않았을 때 '컴포넌트'를 가져온 것이어서 DOM element를 가져오지 않았으니 nativeElement가 undefined 상태였던 것으로 밝혀졌다.. 위의 코드처럼 read property를 지정해주니 간단히 해결했었던 문제.
+) 공식 문서를 읽다가 알게 되었는데 ViewChild는 View Query인데 이는 ngAfterViewInit() 호출 전 셋팅이 된다고. View가 Init된 상태로 callback 되었을 땐 ViewChild, ViewChildren이 모두 View Query를 실행한 결과를 할당한 상태라고 한다.
Angular 공식 문서 내 'ViewChild': https://angular.io/api/core/ViewChild
참고: https://blog.angular-university.io/angular-viewchild/
