如何从子组件到父组件上的指令获取输入事件

问题描述

我有一条指令将输入转换为大写

import { Directive,HostListener } from '@angular/core';

@Directive({
  selector: '[appUpperCase]',})
export class UpperCaseInputDirective {
  @HostListener('input',['$event']) onInput(event) {
    console.log("UpperCaseInputDirective::event",event);
    event.target.value = event.target.value.toupperCase();
    return true;
  }
}

这在输入字段上效果很好，但是现在我想在输入字段周围构建一些样板代码的自定义组件

<div class="form-group-basic">
  <label [for]="internalId">{{label}}</label>
  <mat-form-field floatLabel="always" appearance="outline">
    <input
      [id]="internalId"
      matInput
      [formControl]="formControl"
      (input)="onInput($event)"
    />
    <mat-error *ngIf="formControl.invalid">{{
      getErrorMessage(formControl.errors)
      }}</mat-error>
  </mat-form-field>
</div>

要从我的自定义组件外部的输入字段中获取输入事件，我已使用EventEmitter转发了该事件

import { Component,EventEmitter,forwardRef,HostBinding,Input,Output } from '@angular/core';
import { ControlValueAccessor,FormControl,NG_VALUE_ACCESSOR } from '@angular/forms';
import { translateErrors } from '../../../translation/service/translation.service';

@Component({
  selector: 'app-input',templateUrl: './input.component.html',providers: [
    {
      provide: NG_VALUE_ACCESSOR,useExisting: forwardRef(() => InputComponent),multi: true
    }
  ]
})
export class InputComponent implements ControlValueAccessor {

  @HostBinding('attr.id')
  externalId = '';
  internalId = '';

  @input()
  formControl: FormControl;

  @input()
  label: string;

  @input()
  set id(value: string) {
    this.internalId = value;
    this.externalId = null;
  }

  get id() {
    return this.internalId;
  }

  @Input('value') _value = '';
  onChange: any = () => {};
  onTouched: any = () => {};

  get value():string {
    return this._value;
  }

  set value(value: string) {
    this._value = value;
    this.onChange(value);
    this.onTouched();
  }

  @Output() input: EventEmitter<any> = new EventEmitter();

  control: FormControl;

  constructor() {
    this.control = new FormControl()
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  writeValue(value) {
    if (value) {
      this.value = value;
    }
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

  getErrorMessage(errors: object): string {
    return translateErrors(errors);
  }

  onInput(event) {
    console.log("inputComponent::onInput",event);
    this.input.emit(event);
  }
}

现在我尝试给我的自定义组件该指令：

<app-input id="test-input-field" (input)="onInput($event)" [formControl]="test" appUpperCase label="Test" ></app-input>

但是没有调用该指令。当我输入字符时，我会看到

inputComponent::onInput InputEvent {isTrusted: true,data: "d",isComposing: false,inputType: "insertText",dataTransfer: null, …}
customed.component.ts:94 paymentDetailsFormComponen::onInput InputEvent {isTrusted: true, …}

我在inputField组件上看到了一次该事件，而在我的组件上看到了两次，但是未调用该指令的处理程序。我该如何实现？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular angular-directive