当我在组件 A 中获得此函数的事件时，如何在组件 B 中调用函数

Question

我想在从 ws 获取事件时使用事件发射器：

我有这个函数可以获取事件，当我有事件时我想调用其他组件中的函数。

组件 A，打字稿代码：

@Output() notify: EventEmitter<any> = new EventEmitter();
getSocketevent() {
  this.socket.on('data', (data) => {
    this.notify.emit(data)
  });
}

组件 A，html 代码：

<app-component-B (click)='getSocketevent()'></app-component-B>

在组件 B 中我想调用这个函数：

getprod() {
  this.ws.getallprod().subscribe(res => {
    this.dataSource = new MatTableDataSource(res);
    this.dataSource.paginator = this.paginator
  })
}

当我在组件 A 中获取此函数的事件时如何调用组件 B 中的函数？

Answer 1

您可以尝试从父级调用子方法：

<app-component-B #child (click)='getSocketevent()'></app-component-B>

ts:

getSocketevent() {
    var self = this;
    this.socket.on('data', (data) => {
    this.child.getprod(); // call getprod
      this.notify.emit(data)
    });
  }

Answer 2

来自Component Interaction > Parent calls an @ViewChild()

When the parent component class requires that kind of access, inject the child component into the parent as a ViewChild.

你的情况是：

// A component.ts
....
@ViewChild(BComponent, {static: false})
private bComponent: BComponent;

getSocketevent() {
  this.socket.on('data', (data) => {
    // this.notify.emit(data)
    this.bComponent.getprod();
  });
}

StackBlitz Demo

在这种情况下，您可以看到您实际上并不需要使用 EventEmitter。

当我在组件 A 中获得此函数的事件时，如何在组件 B 中调用函数

How to call function in component B when I get an event for this function in Component A

events

eventemitter

angular