0

在我的 Angular 项目中，我有一个有 2 个成员函数的类。在第一个函数中，我有 2 个级别的回调。在第一个回调中，我需要添加第二级事件回调。在这个第二级回调中，我需要能够调用顶级类的第二个成员函数。我尝试了https://www.pluralsight.com/guides/javascript-callbacks-variable-scope-problem中建议的技巧。它对我不起作用。目前我正在尝试Angular2 - 如何从应用程序外部调用组件函数，该应用程序讨论 ngZone 以公开组件成员函数。

我的代码的详细信息：

我有一个用 Angular 8 编写的音频处理“AudioProcessingUtility”类。在它的 Init() 中，我正在初始化 MediaRecorder。我正在为“datavailable”事件添加一个监听器。此侦听器函数需要从“主”类调用我的实用程序函数。即它必须从回调进入父类的范围。

代码：

 export class AudioProcessingUtility  {
//integrated componet-level properties

//video conf specific properties
localAudioStreamStdObj: MediaStream;
mediaRecorder: any;
agoraService: any;
localStream: Stream; 

constructor() {}

private StreamInit() { //top-level member function to init

    this.localStream.init(() => { 

        this.agoraService.client.publish(this.localStream, function (err) { //This triggers "stream-published" event.
            console.log("Publish local stream error: " + err);
        });
        this.agoraService.client.on('stream-published', function (evt) {
            console.log("Publish local stream successfully");
            this.localAudioStreamStdObj = new MediaStream([evt.stream.getAudioTrack()]); //Specific details of media API
            this.mediaRecorder = new MediaRecorder(this.localAudioStreamStdObj, { mimeType: 'audio/webm' }); //Specific details of media API
            this.mediaRecorder.start(4000);
            this.mediaRecorder.addEventListener("dataavailable", event => { //Triggered every 4 seconds. 
                console.log("callbackfn: data vailable");
                console.log(event.data);
                //MY NEED
                this.audioProcessorCallback(event.data); //top-level member function be called
            }); 

            this.mediaRecorder.addEventListener("stop", () => {
            });
            ////end real time grab

        });
    }, function (err) {
        console.log("failed", err);
        });

}//end of stream Init function

public audioProcessorCallback(eventdatavailable) { //Top-level function to be called from 2nd-level callback
    console.log("My processing");
    //Do REST API calls. Based on internal states of the class, do specific processing
  }
 } //end of AudioProcessingUtility

问题：

触发 dataavailable 事件。但我在以下几行中遇到错误。它给出错误ERROR TypeError: this.audioProcessorCallback is not a function

     //MY NEED
     this.audioProcessorCallback(event.data); //top-level member function be called is not recognized.

我知道这是因为 - 在回调内部，它无法找到“this context”。请建议我如何调用我的类函数，而不必将所有内容都放在内联回调函数中，这对我来说是不切实际的。

编辑：我重写了问题以提供显示完整代码并更改了描述。提前致谢。

4

2 回答 2

0

我的问题是由于上下文。从第 2 级的回调中，它无法看到“此上下文”，并且无法访问成员函数。我通过 ngZone 暴露了 Angular 组件。我从回调中调用它，就好像我从外部 javascript 函数中调用一样。答案基于 Angular2 - 如何从应用程序外部调用组件函数

//Mycomponent.ts

import {  NgZone, OnDestroy } from '@angular/core';

constructor(
        //other params removed for clarity
      private _ngZone: NgZone
      )
      {
      //This is how I register with 'window'. 'audioProcessFn' is the alias for my member function.
       window['MycomponentRef'] = { component: this, zone: _ngZone, audioProcessFn: (value) => this.audioprocessor(value) };
      }

 ngOnDestroy() 
{
    window['MycomponentRef'] = null;
}

在我的回调中，代替

      //MY NEED
            this.audioProcessorCallback(event.data); //top-level member function be called
        });

我现在有这个代码 -

   /MY NEED
                    window['MycomponentRef'].zone.run(() => {
                        console.log("ngZone.run . Call getRealtime Emotion ");
                        window['MycomponentRef'].audioProcessFn(base64data );
                    })          
                }

            });
于 2019-12-28T05:31:07.960 回答
0

我不确定为什么你需要一个return回调。考虑一下：

client.on("stream-published", evt => {
  console.log("Publish local stream successfully");
  this.mediaRecorder.addEventListener("dataavailable", event => {
    console.log("callbackfn: data vailable");
    console.log("Calling this.audioprocessor(event)");
    this.audioprocessor(event);
  });
});

一旦callback被触发，它将触发this.audioprocessor. 由于您使用的是箭头函数，因此上下文this将是class

于 2019-12-25T16:34:17.333 回答