如何在 Angular 中为自定义组件实现伪事件？

Posted 2023-02-23

【中文标题】如何在 Angular 中为自定义组件实现伪事件？

【英文标题】：How to implement a pseudo event for a custom component in Angular?

【发布时间】：2020-06-17 17:27:18

【问题描述】：

我有一个自定义组件，其中包含这样的输入和按钮

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

我希望它有一些功能，所以当用户在输入上按 enter 时，它应该发出一个伪事件

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

我已尝试使用 @HostListener，但我收到了关于递归过多的错误，请帮助我

【问题讨论】：

使用@Output，见angular.io/guide/…

【参考方案1】：

您可以使用 Reactive Forms FormArray 来解决这个问题。您可以将(keyup) 或(keyup.enter) 处理程序附加到<input />。在此keyup 事件的处理程序中，我们将新的FormControl 推送到FormArray。此示例使用 FormBuilder 生成一个 FormGroup，其中包含一个 FormArray 和一个事物的键。我们使用 FormArray 的 push 方法在 keyup 的处理程序中添加一个新的FormControl/AbstractControl。

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>

在一个非常基本的级别上，您可以使用相应 FormArray 元素的控件属性和使用 value 属性的值循环遍历表单数组中的每个元素：

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

这是一个 StackBlitz(https://stackblitz.com/edit/angular-r5zmbg) 演示功能。

希望对您有所帮助！

【参考方案2】：

您可以简单地使用事件发射器的概念，您可以在其中将事件从您的自定义组件发送到您的父组件

----自定义组件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>

【讨论】：

“角度方式”是使用@Output