Angular 如何在kamiazya/ngx语音识别版本中录制完成后自动隐藏元素

我有一个文本框和一个listen按钮，当你点击listen时，它将开始录制并附加到文本框中，“Listening…”文本将可见。现在我的要求是，当我点击“停止收听”按钮时，任何时候录音都应该停止，同时“收听…”文本也应该隐藏。另外，假设我的录制在单击“停止侦听…”按钮之前结束，则“侦听…”文本应在完成录制后自动隐藏。这是我创建的演示。也请找到下面的代码

app.component.html 我用叉子叉了你的头发。要停止侦听，请将

takeUntil

[operator]（）添加到管道中。使用布尔值销毁订阅。因此，您的app.ts组件将如下所示：

  ....
  stop = new Subject<boolean>();      
  listen() {
    this.listening = true;
    this.service
      .listen()
      .pipe(
        resultList,
        takeUntil(this.stop)
      )
      .subscribe((list: SpeechRecognitionResultList) => {
        const item = list.item(0);
        this.message = item.item(0).transcript;
        console.log("RxComponent:onresult", this.message, list);
        if (item.isFinal) { // this is set true when stream ends
          this.listening = false; // so its good time to set false
        }
      });
  }

  stopListening() {
    this.listening = false;
    this.stop.next(true);
  }

。。。。
停止=新主题（）；
听{
这是真的；
这是服务
.听我说
.烟斗(
结果列表，
takeUntil（到此为止）
)
.订阅（（列表：SpeechRecognitionResultList）=>{
常量项=列表项（0）；
this.message=item.item（0）.转录本；
log（“RxComponent:onresult”，this.message，list）；
如果（item.isFinal）{//，则在流结束时将此设置为true
this.listing=false；//所以现在是设置false的好时机
}
});
}
停止听{
这是错误的；
这个。停止。下一个（正确）；
}

在您的视图中，使用*NGIF隐藏和显示视图的必要部分：

  <button  
    (click)="listen()"
  >listen</button>
<p *ngIf="listening">Listening..</p>
<button *ngIf="listening" (click)="stopListening()">Stop Listening</button>

听
倾听

别再听了

您应该在stackblitz项目中添加

@kamiazya/ngx语音识别

作为包依赖项，并且它也依赖于@angular/cdk。另外值得一提的是，它只在chrome上工作。我已经添加了这个软件包，它可以正常工作，但我的要求是当我点击“停止收听”按钮时，在任何时候都应该停止录制，同时隐藏“收听…”文本。另外，假设我的录音在单击“停止收听…”按钮之前结束，“收听…”文本应在完成录音后自动隐藏感谢您的回答。单击“停止收听”按钮并再次单击“收听”后，这里有一个小问题“按钮，录制未发生。@UIAPPDEVELOPER当您从observable取消订阅时，似乎比

listen（）

方法提供的要多，它会导致错误并使您无法再次订阅。那么解决方法是什么呢？”

  ....
  stop = new Subject<boolean>();      
  listen() {
    this.listening = true;
    this.service
      .listen()
      .pipe(
        resultList,
        takeUntil(this.stop)
      )
      .subscribe((list: SpeechRecognitionResultList) => {
        const item = list.item(0);
        this.message = item.item(0).transcript;
        console.log("RxComponent:onresult", this.message, list);
        if (item.isFinal) { // this is set true when stream ends
          this.listening = false; // so its good time to set false
        }
      });
  }

  stopListening() {
    this.listening = false;
    this.stop.next(true);
  }

  <button  
    (click)="listen()"
  >listen</button>
<p *ngIf="listening">Listening..</p>
<button *ngIf="listening" (click)="stopListening()">Stop Listening</button>