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

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

当父组件类需要这种访问权限时，将子组件作为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。

Answer 2

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

import cv2
cap = cv2.VideoCapture('rtsp:...'
while True:
    ret,frame = cap.read()
    frame = cv2.resize(fram,fx = 0.5,fy = 0.5)
    frame = cv2.cvtColor(frame,cv2.COLOR_BGR2GRAY)
    cv2.imshow('win',frame)
    if cv2.waitKey(1) & 0xFF:
        break
cv2.stop()

ts：

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

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

2 个答案: