html - 如何在使用 Angular 2 通过 webkitspeech 录制时动态地将文本添加到文本区域？

Question

目前，我在 Angular Component 中用这个简单的代码录制我的声音

speechToText() {
    const {webkitSpeechRecognition}: IWindow = <IWindow>window;
    const recognition = new webkitSpeechRecognition();

    recognition.lang = 'en-US';
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onresult = event => {
      for (let i = event.resultIndex; i < event.results.length; ++i) {
        this.interim_transcript = event.results[i][0].transcript;
      }
    };

    recognition.onerror = event => {
      console.log('Error occured', event);
    };

    recognition.start();
  }
}

在我的 HTML 中，我将值绑定(bind)到中间结果

<textarea #description mdInput rows="5" placeholder="Short Story" name="description" [value]="interim_transcript"></textarea>

但是，问题是只有在我单击文本区域或其外部以触发 dom 更新后，我才能看到文本被放入文本区域。如何让它在我开始说出提供此实时文本更新的单词时立即更新文本区域，与这里的方式相同 https://www.google.com/intl/en/chrome/demos/speech.html

Answer 1

发生这种情况是因为 Angular 不知道 interim_transcript 的更新因为它发生在 Zone 所知道的范围之外。

我看到了两种立即修复它的方法:

• 运行 interim_transcript更新 zone.run称呼。参见 NgZone在文档中。
• 制作interim_transcript一个Observable .实际上是一个 Subject ，但关键是它需要可观察。

我会推荐后者，它基本上包括:

1. 当你定义interim_transcript ，这样定义它:interim_transcript: new Subject<string>()

2. 当您在 onresult 中更新它时回调、替换

this.interim_transcript = event.results[i][0].transcript;

与

this.interim_transcript.next(event.results[i][0].transcript);

1. 更改 value在您的模板中绑定(bind)，替换:

[value]="interim_transcript"

与

[value]="interim_transcript | async"

Observables 是一个非常强大的概念，可以使您的代码更易于推理(即使起初看起来很奇怪)。当您开始使用 OnPush 时，它可以显着提高您的性能变更检测机制。最后，无论听起来多么俗气，它都可以改变您对程序的思考方式，将其转变为数据流思维模型而不是状态更新。这可能听起来令人困惑和奇怪，但我强烈建议您仔细研究一下，我相信它会有所返回。

这里有一些很好的入门资源:

Using Observable来自 Rangle.io。

Understand and Utilize the Async Pipe in Angular 2来自 Brian Troncone