Angular 自定義輸入聚焦時未觸發單擊事件

Question

我使用“ControlValueAccessor”創建了簡單的自定義輸入eu-input元素。 現在我有類似的東西：

  <eu-input></eu-input>
  <div *ngFor="let item of items" (click)="choose(item)">
      <span>{{item.name}}</span>
  </div>

但是有一個問題我想不通。 當eu-input聚焦時，click 事件不會被觸發，它僅在eu-input模糊后觸發（第二次嘗試）。 那么可能是什么問題？

這是 html：

<input [(ngModel)]="value"/>local: {{val}}

這是 ts 文件：

import { Component, OnInit, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'eu-input',
  templateUrl: './eu-input.component.html',
  styleUrls: ['./eu-input.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => EuInputComponent),
      multi: true,
    },
  ],
})
export class EuInputComponent implements OnInit, ControlValueAccessor {
  constructor() {}
  ngOnInit(): void {}
  onChange: any = () => {};
  onTouch: any = () => {};
  val = '';
  set value(val) {
    if (val !== undefined && this.val !== val) {
      this.val = val;
      this.onChange(val);
      this.onTouch(val);
    }
  }
  writeValue(value: any) {
    this.value = value;
  }
  registerOnChange(fn: any) {
    this.onChange = fn;
  }
  registerOnTouched(fn: any) {
    this.onTouch = fn;
  }
}

choose() 方法就是 console.log('choose clicked')

Answer 1

將 eu 輸入組件 html 更改為

<input [(ngModel)]="value" (focus)="emitFocused(true)" (blur)="emitFocused(false)"/>local: {{val}}

在歐盟輸入 TypeScript

@Output() focus = new EventEmitter();
public emitFocused(value) {
   this.focus.emit(value);
}

可以像這樣使用

<eu-input (focus)="myMethod($event)"></eu-input>