javascript - Angular2: Ändringsdetektion inuti observable

Jag har precis testat min första app med Angular2 RC3 (använder Angular-CLI) och jag är förlorad med detta...

Jag har ett problem med "Change detection" för variabeln word. Jag uppdaterar word-variabeln inuti subscribe-metoden för Observable, men inga ändringar registreras.

app.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { VoiceRecognitionService } from './voice-recognition.service';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `<h1>{{word}}</h1>`, // => No prints any update
  providers: [VoiceRecognitionService],
  styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {

  private voice: VoiceRecognitionService;
  public word: string = '';

  constructor( @Inject(VoiceRecognitionService) voiceRecognition: VoiceRecognitionService) {
    this.voice = voiceRecognition;
  }

  ngOnInit() {
    this.voice.record('ca')
      .subscribe(word => {
        console.log(word); // => Is printing well the new word
        this.word = `${word}...`; // => No changes detected
      });
  }
}

Jag minns i Angular 1 användningen av $scope.$apply för liknande fall och jag sökte efter samma sak för Angular2 och jag hittade NgZone.run, jag försökte köra inuti NgZone.run, men inget händer.

Vad gör jag fel?

Tack så mycket.

Extra :

Jag delar min tjänst med Observable:

röstigenkänning.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';

export interface IWindow extends Window {
  webkitSpeechRecognition: any;
}

@Injectable()
export class VoiceRecognitionService {

  constructor() {
    /* void */
  }

  /**
   * Record
   * @param {string} language - Language of the voice recognition
   * @returns {Observable<string>} - Observable of voice converted to string 
   */
  record(language: string): Observable<string> {
    return Observable.create((observer) => {
      const { webkitSpeechRecognition }: IWindow = <IWindow>window;
      const recognition = new webkitSpeechRecognition();

      recognition.onresult = (e) => observer.next(e.results.item(e.results.length - 1).item(0).transcript);
      recognition.onerror = observer.error;
      recognition.onend = observer.completed;

      recognition.continuous = true;
      recognition.interimResults = true;
      recognition.lang = language;
      recognition.start();
    });
  }
}

Svar #1

Jag antar att webkitSpeechRecognition-API:et inte är patchat av Angulars zon.

För att arbeta runt använd zone.run(...) för att tvinga körningen tillbaka till Angulars zon uttryckligen:

@Injectable()
export class VoiceRecognitionService {

  constructor(private zone:NgZone) {
    /* void */
  }

  /**
   * Record
   * @param {string} language - Language of the voice recognition
   * @returns {Observable<string>} - Observable of voice converted to string 
   */
  record(language: string): Observable<string> {
    return Observable.create((observer) => {
      const { webkitSpeechRecognition }: IWindow = <IWindow>window;
      const recognition = new webkitSpeechRecognition();

      recognition.onresult = (e) => this.zone.run(() => observer.next(e.results.item(e.results.length - 1).item(0).transcript));
      recognition.onerror = (e) => this.zone.run(() => observer.error(e));
      recognition.onend = (e) => this.zone.run(() => observer.completed(e));

      recognition.continuous = true;
      recognition.interimResults = true;
      recognition.lang = language;
      recognition.start();
    });
  }
}

Om callback-funktionerna behöver ett annat antal parametrar ((e)), vänligen justera koden därefter. Jag antog bara en parameter för varje.

Fördelen med detta tillvägagångssätt är att användarna av denna tjänst inte behöver vidta ytterligare åtgärder.

Svar #2

Du kan så småningom uttryckligen kalla på detectChanges-metoden i ChangeDetectorRef-klassen:

constructor( @Inject(VoiceRecognitionService) voiceRecognition: VoiceRecognitionService,
    private cdr:ChangeDetectorRef) {
  this.voice = voiceRecognition;
}

ngOnInit() {
  this.voice.record('ca')
    .subscribe(word => {
      console.log(word); // => Is printing well the new word
      this.word = `${word}...`; // => No changes detected
      this.cdr.detectChanges(); // <---------
    });
}

Relaterade artiklar