Angular Speech Recognition 功能被多次调用答案

【问题标题】：Angular Speech Recognition function is getting called multiple timesAngular Speech Recognition 功能被多次调用
【发布时间】：2021-12-22 06:29:46
【问题描述】：

我正在尝试在 Angular 应用程序中使用 Angular-Speech-Recognition。下面是我的 html 和组件 ts 代码。我的演讲被正确分配给this.message。我的要求是，演讲结束后，我想打电话给this.getSearchResults(this.message);。但发生的事情是，对于我演讲中的每个单词，函数调用 this.getSearchResults(this.message) 正在发生。

例如，如果我说"I forgot my password"，我希望this.getSearchResults(this.message) 被调用一次，this.message 是"I forgot my password"。但是发生的事情是函数被调用了 4 次，因为我的演讲中有 4 个单词（对于每个单词，函数 getSearchResults 被触发）。我该如何解决？

 <fa-icon 
 [icon]="faMicrophone" 
 class="microphone-icon" 
 (click)="listenSpeech()">
 </fa-icon> 

listenSpeech() {
    this.speechSrv
      .listen()
      .pipe(resultList)
      .subscribe((list: SpeechRecognitionResultList) => {
        this.message = list.item(0).item(0).transcript;
       this.getSearchResults(this.message);
      });
  }

【问题讨论】：

标签： javascript angular rxjs angular2-observables rxjs-observables

【解决方案1】：

您似乎从未取消订阅，因此每次点击您都会再次订阅。也许您想使用take(1) 来确保每个.subscribe 最多被触发一次？

this.speechSrv
  .listen()
  .pipe(resultList) // Don't know what this is so you might put `take(1)` here instead of using two `pipe()` calls
  .pipe(take(1))
  .subscribe((list: SpeechRecognitionResultList) => {
    this.message = list.item(0).item(0).transcript;
   this.getSearchResults(this.message);
  });

【讨论】：