Angular EventEmitter 没有发射？

Question

我想我误解了EventEmitter的概念。

我试图在发生焦点事件时调用自定义组件上的函数。 这是我的custom-form.component.html：

    <div class="flex flex-col">
        <app-input-form 
        [label]="'Some content'"
        [inputName]="'myCustomInput'"
        ...
        (focusOutEvent)="test($event)"
        ></app-input-form>
    </div>

我添加了测试功能是我的custom-form.component.ts，如下所示：

  test(e: any){
    console.log('test');
  }

最后，在我的 input-form.component.ts （与 app-input-form 相关）中，我添加了 HostListener 和输出，如下所示：

  @Output()
  focusOutEvent = new EventEmitter<any>();

  @HostListener('focusout', ['$event']) myFocusOutFunction(){
    console.log('myFocusOutFunction is triggered')
    this.focusOutEvent.emit();
  }

当我失去焦点时会触发此函数，但测试函数永远不会被调用。

为什么不起作用？ focusOutEvent 是一个输出，并且包含 focusOutEvent.emit() 的 myFocusOutFunction 工作正常，那么我缺少什么？ 谢谢你的帮助

Answer 1

您可以尝试直接使用内置的 focusout 事件

input-form.component.ts

input-form.component.html

<input (focusout)="this.focusOutEvent.emit()">
...

input-form.component.ts

@Output()
focusOutEvent = new EventEmitter<any>();

custom-form.component.html

 <div class="flex flex-col">
    <app-input-form 
    [label]="'Some content'"
    [inputName]="'myCustomInput'"
    ...
    (focusOutEvent)="test()"
    ></app-input-form>
</div>