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);