錯誤百科

不支援的事件目標

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