Question

我正在尝试使用语音识别实例，并且在成功回调中尝试使用语音术语来调用api。问题在于成功回调“ this”被当作语音识别对象的实例而不是类实例。

接下来，我研究了一些解决方案，并将此实例复制到that变量中并称为函数。现在，函数调用可以正常工作，但是所有角度绑定都失败了。代码段如下：

 voiceSearch() {
    console.log('listening');

    if ("webkitSpeechRecognition" in window) {
      const vSearch = new webkitSpeechRecognition();
      vSearch.continuous = false;
      vSearch.interimresults = false;
      vSearch.lang = 'en-US';
      vSearch.start();
      let that = this;

      vSearch.onresult = function (e) {
        voiceHanlder.value = e.results[0][0].transcript;
        that.searchTerm = voiceHanlder.value;
        vSearch.stop();
        that.searchProducts(that.searchTerm); // unable to use this code without using that = this

      }

      vSearch.onerror = function (e) {
        console.log(e);
        vSearch.stop();
      }
    }
    else {
      console.log('Your browser does not support speech recognition');
    }
  }

     searchProducts(searchTerm: string) {
        this.searchMade = true;
        this.getProducts(searchTerm).subscribe(resp => {
          this.searchedProducts = resp['records'];
          this.searchValue = "Now showing the searched products";
          console.log(this.searchedProducts);
        })
      }

我将代码更改为：

  vSearch.onresult ( (e) => {
    voiceHanlder.value = e.results[0][0].transcript;
    that.searchTerm = voiceHanlder.value;
    vSearch.stop();
    that.searchMade = true;
    that.searchCvsProducts(that.searchTerm);
    that.listeningOn = false;
    //voiceSearchForm.submit();
  })

但是我收到类似vSearch.onResult的错误，不是一个函数。

我们可以使用粗箭头运算符来避免that =此代码。

Answer 1

您需要使用na箭头功能来捕获this上下文。

vSearch.onresult = (e) => {
        voiceHanlder.value = e.results[0][0].transcript;
        this.searchTerm = voiceHanlder.value;
        vSearch.stop();
        this.searchProducts(this.searchTerm);
}

我建议您阅读TypeScript Handbook中的“函数”一章，其中对this在函数中的工作方式有很好的解释。

语音识别回调，未在回调内部定义

1 个答案: