聚焦自定义输入时未触发角度单击事件答案

【问题标题】：Angular click event not fired when custom input is focused聚焦自定义输入时未触发角度单击事件
【发布时间】：2020-05-22 12:55:10
【问题描述】：

我使用“ControlValueAccessor”创建了简单的自定义输入 eu-input 元素。现在我有类似的东西：

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

但是有一个我想不通的问题。当eu-input 被聚焦时，点击事件不会被触发，它仅在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')

【问题讨论】：

我不明白 - 你说的是哪个点击事件？我们在 div 上有点击事件，但在 eu-input 上没有。
你能分享你的代码吗？ html和ts？
对，我的意思是div上的点击事件。
这两件事（eu-input 和其他 div）彼此无关。很难理解，为什么 div 上的正常（单击）事件不再起作用。请向我们展示 choose() 方法。更好：请做一个堆栈闪电战。
我明白了，但是如果输入有焦点，我应该点击两次div，第一次点击使其模糊，第二次触发实际点击事件函数choose

标签： javascript html angular

【解决方案1】：

将eu-input组件html改为

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

在 eu-input TypeScript 中

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

可以像一样使用

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

【讨论】：