Как реализовать псевдо-событие для пользовательского компонента в Angular?

Question

У меня есть пользовательский компонент, который содержит вход и такую ​​кнопку

<div class="input-group">
    <input type="text" class="form-control form-control-sm"
        (input)="change($event)"
        ngbDatepicker #d="ngbDatepicker" required
        #datef />
    <div class="input-group-append">
        <button type="button" class="btn btn-sm btn-success" (click)="d.toggle()" type="button">
            <i class="fa fa-calendar"></i>
        </button>
    </div>
</div>

Я бы хотел, чтобы он имел некоторую функциональность, поэтому, когда пользователь нажимает ввод на входе, он должен генерировать псевдо-событие

<custom-datepicker (keyup.enter)="handleKeyboard($event)"></custom-datepicker>

Я пытался с @HostListener, но я получаю ошибки о слишком большой рекурсии, пожалуйста, помогите мне

Answer 1

Вы можете просто использовать концепцию отправителей событий, в которой вы можете отправлять событие из своего пользовательского компонента в родительский компонент

---- Пользовательский компонент Html ----

<div class="input-group">
<input type="text" class="form-control form-control-sm"
    (input)="change($event)"
    ngbDatepicker #d="ngbDatepicker" required
    #datef />
<div class="input-group-append">
    <button type="button" class="btn btn-sm btn-success" (click)="d.toggle()" type="button">
        <i class="fa fa-calendar"></i>
    </button>
</div>

---- Пользовательский компонент ts ----

@Output()
customEvent = new EventEmitter();
change(event) {
this.customEvent.emit();
}

---- Родительский компонент ----

<custom-datepicker (customEvent)="handleKeyboard($event)"></custom-datepicker>

Answer 2

Вы можете подойти к этому, используя Reactive Forms FormArray . Вы бы прикрепили обработчик (keyup) или (keyup.enter) к <input />. В обработчике этого события keyup мы добавляем FormControl к FormArray. Этот пример использует FormBuilder для генерации FormGroup, которая содержит FormArray с ключом вещей. Мы используем метод FormArray pu sh, чтобы добавить новый FormControl/AbstractControl в обработчике для keyup.

Component:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm();
  }


  onEnter() {
    this.addThing();
  }

  get things() {
    return this.myForm.get('things') as FormArray;
  }

  private createForm() {
    this.myForm = this.fb.group({
      things: this.fb.array([
        // create an initial item
        this.fb.control('')
      ])
    });
  }

  private addThing() {
    this.things.push(this.fb.control(''));
  }
}
Template:

<form [formGroup]="myForm">
    <div formArrayName="things">
        <div *ngFor="let thing of things.controls; let i=index">
            <label [for]="'input' + i">Thing {{i}}:</label>
            <input type="text" [formControlName]="i" [name]="'input' + i" [id]="'input' + i" (keyup.enter)=""  />
        </div>
    </div>
</form>

На очень базовом уровне c вы можете пройти l oop через каждый в массив формы с использованием свойства элементов управления соответствующего элемента FormArray и значение с использованием свойства value:

<ul>
  <li *ngFor="let thing of things.controls">{{thing.value}}</li>
</ul>

Вот StackBlitz (https://stackblitz.com/edit/angular-r5zmbg), демонстрирующий функциональность.

Надеюсь, это поможет!