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变得模糊之后（第二次尝试），才触发click事件。那可能是个问题吗？

这是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-input组件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>

自定义输入聚焦时不触发角型单击事件

1 个答案: