我可以从事件绑定到自定义组件输出吗答案

【问题标题】：can i bind from event to custom component output我可以从事件绑定到自定义组件输出吗
【发布时间】：2020-09-25 03:31:10
【问题描述】：

我有一个自定义组件

export class SystemInputComponent implements OnInit, OnDestroy {

  @Input() ...

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

具有作为事件的输出据我所知

并且该组件在其他组件html中导入外部

<div class="input-group">
    <system-input #systemInput></system-input>
</div>

绑定事件的常规方法是将其作为属性添加到组件标签中 () 并将其绑定到函数

<system-input #systemInput (enterFn)="someFunct($event)"></system-input>

问题是我可以从 ts 代码中将它与像这样的 rxjs fromEvent 函数绑定

.ts 文件内

import { fromEvent } from 'rxjs';
.
.
..
@ViewChild('systemInput') systemInput:any;
ngOnInit(){
     fromEvent(this.systemInput.nativeElement,'enterFn').subscribe(a => //a is the $event );
}
..

如果它可以正确地处理它，因为它给我一个错误

Cannot read property 'nativeElement' of undefined

编辑正如 JoH 在第一条评论中所说，我将其移至 ngAfterViewInit

ngAfterViewInit(){
     fromEvent(this.systemInput.elementRef.nativeElement,'enterFn').subscribe(a => //a is the $event );
}

它给了我新的错误

Invalid Event Traget

【问题讨论】：

在ngAfterViewInit() 方法中移动fromEvent(this.systemInput.nativeElement,'enterFn').subscribe(a => //a is the $event );。你需要实现AfterViewInit接口。
我做到了，但它无法识别目标，它给了我错误 Invalid event target
您正在触发的 someFunct() 方法在哪里？你能说明它的定义吗？
我的问题不在于 someFunct($event) 方法，我想要做的是将事件与来自 rxjs 的 fromEvent 绑定以替换它的常规使用

标签： angular rxjs6 rxjs-observables angular10

【解决方案1】：

nativeElement 通常用于获取对 HTML 元素类的引用。在这里，您 ViewChild 是一个 Angular 组件。它没有nativeElement 属性。

所以直接订阅不需要fromEvent：

@ViewChild('systemInput') systemInput: SystemInputComponent;
ngAfterViewInit(){
  this.systemInput.enterFn.subscribe(a => //a is the $event );
}

【讨论】：