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中，我将值绑定到中间结果

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

然而，问题是我只能在点击textarea或其外部以触发dom更新后才能看到文本被放入textarea。如何在我开始说出提供此实时文本更新的文字时更新textarea，方法与此处https://www.google.com/intl/en/chrome/demos/speech.html相同

Answer 1

这是因为Angular不知道interim_transcript的更新，因为它发生在区域所知的范围之外。

我看到两种直接解决方法：

在interim_transcript来电中运行zone.run更新。请参阅文档中的NgZone。
让interim_transcript成为Observable。实际上是Subject，但关键是它需要可观察。

我推荐后者，它基本上涉及这个：

定义interim_transcript时，请按以下方式定义：interim_transcript: new Subject<string>()
在onresult回调中更新时，请替换

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

与

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

更改模板中的value绑定，替换：

[value]="interim_transcript"

与

[value]="interim_transcript | async"

Observable是一个非常强大的概念，可以让你的代码更容易推理（即使它起初看起来很奇怪）。当您开始使用OnPush更改检测机制时，它可以显着提高您的性能。最后，听起来很俗气，可以改变你对程序的看法，改变数据流思维模式而不是状态更新。这可能听起来令人困惑和奇怪，但我强烈建议调查，我相信它会得到回报。

以下是一些很好的入门资源：

Using Observable。

Understand and Utilize the Async Pipe in Angular 2

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

1 个答案: