Angular中@HostListener方法内@Input值始终为undefined的问题

为什么field在@HostListener中是undefined？ #

可能有这几个核心原因：

• 父组件未正确传入值：检查父组件使用<input-help>时，是否给[field]绑定了有效内容——比如如果绑定变量的话，是否错写为field="xxx"而非[field]="xxx"，或者绑定的变量本身就是undefined。
• 输入属性赋值晚于事件触发：如果父组件的field值是异步获取（比如HTTP请求返回），那在组件初始化后、数据返回前触发mouseenter事件时，field还未完成赋值，自然是undefined。
• 非空断言的误导：你用!非空断言告诉TypeScriptfield不会为空，但这只是编译期的提示，运行时如果实际没传入值，field依然会是undefined。

用ngOnInit存变量能解决吗？ #

分场景判断：

• 如果父组件是同步传入field值，这种方法可行。因为ngOnInit会在输入属性绑定完成后执行，你可以在这个钩子内把field赋值给一个组件内部变量，之后在@HostListener里使用这个内部变量即可。
• 如果是异步传入值，这种方法无效。因为ngOnInit只执行一次，异步数据回来后field更新，但内部变量不会自动同步。这种情况应该用输入属性的setter或者ngOnChanges钩子监听field的变化，实时更新内部变量：

方案1：输入属性setter #

export class InputHelpComponent implements OnInit {
  isOpened: boolean = false;
  private _field!: string;

  @Input() set field(value: string) {
    this._field = value;
  }

  @HostListener("mouseenter", ['$event']) onMouseEnter(event: Event) {
    console.log('hostlistener:', this._field);
    this.isOpened = true;
  }
}

方案2：ngOnChanges钩子 #

import { SimpleChanges, OnChanges } from '@angular/core';

export class InputHelpComponent implements OnInit, OnChanges {
  isOpened: boolean = false;
  @Input() field!: string;
  private _field!: string;

  ngOnInit(): void {
    this._field = this.field;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['field']) {
      this._field = changes['field'].currentValue;
    }
  }

  @HostListener("mouseenter", ['$event']) onMouseEnter(event: Event) {
    console.log('hostlistener:', this._field);
    this.isOpened = true;
  }
}

内容的提问来源于stack exchange，提问作者pasha vibe