Angular - 특정 태그의 EventListener를 통하여 Bind하는 방법?

Question

ngOnInit() { document.querySelector(&#34;#reload&#34;).addEventListener('click', function() { this.onReload('A'); }); } onReload(p) { console.log(&#34;##### onReload() ##### >>>>&#34; &#43; p); }앵귤러를 사용중이며 궁금한점이 있습니다.화면이 로딩될때 ngOnInit() 에서 각 버튼에 이벤트를 부여하는 방법을 사용하려합니다(공통으로 사용하는 버튼 component가 있으므로 태그에 (click)&#61;&#34;&#34; 이 아닌 직접 태그를 selecor 하여 bind하는 방법밖에 생각해내지 못했습니다....) 문제는 click event 안에 this.onReload()가 error를 발생합니다.이유는 왜인지 알것도 같은데..... 딱히 떠오르는 방법이 없어서 그러는데 방법과 혹시 이와 관련하여 팁같은게 있으시다면 알려주실수있나요?

샴푸한잔 · Accepted Answer

자답입니다. ngOnInit() 의 addEventListener 영역 밖에 this를 변수로 선언하여 내부에서 선언한 변수를 활용하여 처리했습니다.ngOnInit() { const aThis &#61; this; document.querySelector(&#34;#reload&#34;).addEventListener('click', function() { aThis.onReload('A'); }); } onReload(p) { console.log(&#34;##### onReload() ##### >>>>&#34; &#43; p); } 혹시 다른방법이 있다면 알려주시면 감사하겠습니다 !

원푠듯 · Answer

자답하셨는데 추가 댓글을 달아 봅니다. 0. 사용하신 방법 1. addEventListener에 들어간 함수를 this 바인딩 한다.ngOnInit() { document.querySelector(&#34;#reload&#34;).addEventListener('click', (function() { this.onReload('A'); }).bind(this)); } onReload(p) { console.log(&#34;##### onReload() ##### >>>>&#34; &#43; p); } 2. Arrow Function 사용ngOnInit() { document.querySelector(&#34;#reload&#34;).addEventListener('click', () &#61;> { this.onReload('A'); }); } onReload(p) { console.log(&#34;##### onReload() ##### >>>>&#34; &#43; p); } 번외. ViewChild, Renderer2를 사용한 방법&#64;ViewChild('reload', { static: false }) reloadElRef: ElementRef; constructor( private renderer: Renderer2 ) {} ngAfterViewInit() { this.renderer.listen(this.reloadElRef.nativeElement, 'click', () &#61;> { this.onReload('A'); }); } onReload(p) { console.log(&#34;##### onReload() ##### >>>>&#34; &#43; p); } 번외는 조금 복잡해 보이기도 하고 사족인데, Angular 팀에서 코드 디자인 상이나, 보안상으로 권장하는 방법입니다.애초에 Angular 같은 프레임워크를 쓰는 주된 목적 중 하나가 DOM에 직접 접근하는 경우를 줄이기 위해서이기도 하니까요. ViewChild 데코레이터와 Renderer2 모듈은 한 번 사용법을 찾아보시고-Angular에 익숙해지시면 querySelector나 querySelectorAll 없이도 얼마든지 DOM 조작을 하실 수 있게 될 거에요. &#43; 사족: ngOninit에서 해당 template의 셀렉터 호출하면 빈 값 나오지 않나요?

샴푸한잔 · Answer

원푠듯 // 감사합니다!!arrow function을 현재 활용하고있습니다ㅎㅎㅎ 아무래도 초반이다보니 javascript나 jquery사용이 익숙했던지라 querySelector같은 방법만을 찾게 되더군요 ㅠㅠ 추가로 onInit에서 template를 호출하면 콘솔에 null error이 발생하곤 하더라구요해당 현상을 해결하기위해 afterInitView도 사용해보고.... 호출시점관련하여 이슈가 있다는 분들도 계셔서setTimeOut을 사용하되 시간은 따로 설정하지않고 묶어만 둠으로써 콘솔에 나타나는 에러 코드는 잡았는데바른길로 가고 있는것이 맞는지는 잘 모르겠습니다... 어렵네요 정말 ㅎㅎ 정리하셔서 달아주신 답변 잘 참고하겠습니다 감사합니다 !! :)

Angular - 특정 태그의 EventListener를 통하여 Bind하는 방법?

3개의 답변

Q&A 목록