Angular가 전역 이벤트 대상으로 인식하는 문자열 값은 'window', 'document', 'body' 세 가지뿐입니다. 전역 이벤트 리스너를 등록할 때 다른 문자열을 대상으로 전달하면 Angular가 대상을 찾지 못하고 이 오류를 발생시킵니다.
오류 디버깅하기
@HostListener나 Renderer2.listen()에서 사용한 대상 이름에 오타가 있는지 확인하세요. 'window' 대신 'windw'를 쓰는 작은 실수만으로도 오류가 발생합니다.
@Component({
selector: 'app-example',
template: '<button>Click me</button>',
})
export class Example {
@HostListener('windw:resize') // typo — should be 'window'
onResize() {}
}
Angular가 인식하지 못하는 문자열로 Renderer2.listen()을 직접 호출할 때도 마찬가지입니다.
this.renderer.listen('global', 'click', handler); // 'global' is not supported
오류 해결하기
대상을 지원하는 세 문자열 중 하나로 수정하거나 문자열 대신 실제 DOM 요소를 전달하세요.
@Component({
selector: 'app-example',
template: '<button>Click me</button>',
})
export class Example {
@HostListener('window:resize')
onResize() {}
}
// Use an element reference when you need to target something more specific
this.renderer.listen(this.elementRef.nativeElement, 'click', handler);