时间戳

首页 > 解决方案 > 如何在 Angular 中为自定义组件实现伪事件？

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

问题描述

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

<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，但是我收到了关于递归过多的错误，请帮帮我

标签： htmlangulartypescripteventscomponents

解决方案

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

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

推荐阅读