时间戳

首页 > 解决方案 > 聚焦自定义输入时未触发角度单击事件

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

问题描述

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

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

标签： javascripthtmlangular

解决方案

将 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>

推荐阅读