在Angular中,可以使用@ViewChild装饰器和ElementRef来获取表单控件,并使用blur()方法手动触发失去焦点事件。以下是一个解决方法的代码示例:
HTML模板:
组件代码:
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
  selector: 'app-my-component',
  template: '...',
})
export class MyComponent {
  @ViewChild('myInput', { static: false }) myInput: ElementRef;
  onInputFocus() {
    console.log('Input focused');
  }
  onInputBlur() {
    console.log('Input blurred');
  }
  someMethod() {
    // 手动触发失去焦点事件
    this.myInput.nativeElement.blur();
  }
}
上述代码中,@ViewChild('myInput', { static: false }) myInput: ElementRef将模板中的#myInput指令与组件中的myInput属性关联起来。然后,可以在onInputFocus()和onInputBlur()方法中处理焦点事件。在someMethod()方法中,调用this.myInput.nativeElement.blur()手动触发失去焦点事件。
请注意,ViewChild装饰器的第二个参数{ static: false }用于支持模板的延迟加载。如果使用的是Angular 8及以上的版本,可以删除该参数。