サービスでコンポーネント変数を更新する方法角度4

Question

私は角を傾けて、古いプロジェクトを角で作成しようとしています。

これは非常にシンプルなサブタイトル機能です。YouTube APIのonReadyでは、setIntervalを使用してYouTube動画の進行状況を確認し、表示するテキストを確認します。 私はYouTubeへのサービスを作成しました。問題は次のとおりです。コンポーネントに戻ってHTMLで停止間隔ループを表示しないでください。

私の最高の試みは、私は、変数を作成し、私は部品やショーで変数を更新することができ、それによって

constructor(private activatedRoute: ActivatedRoute, private api: ApiService, private ngZone: NgZone, private youtubeService: YoutubeService) { 
    this.activatedRoute.params.subscribe((params: Params) => { 
    this.video = params['name']; 

    this.api.getVideo({ name: this.video }).then((sucesso) => { 

     this.lyrics = sucesso['lyrics']; 

     this.youtubeService.startPlayer(this.song, this.lyrics); 

     this.youtubeService.broadcast.delay(0).subscribe((value) => { 
     this.ngZone.run(() => { 
      this.lyricShow = value.lyric; 
      this.actual = value.actual; 
     }); 
     }); 
    }); 
    }); 
} 

を購読する私が使用私のコンポーネントで.next

broadcast: ReplaySubject<any> = new ReplaySubject(); 
this.broadcast.next({ 'text': lyric }); 

Observable.interval(100).subscribe(x => { 
    this.updateTime(); // function with .next() 
}); 

で返す、ReplaySubjectましたしかし、遅れて。 コンポーネント内でこの機能を使用する場合=遅延はありませんが、サービスでは少し遅延（間隔+遅延）があります。

変数を遅延なくコンポーネントに返すことは可能ですか？

おかげ

Answer 1

は角の ngOnInit()ライフサイクルフックにコンストラクタからあなたのコードを移動し

。また、ngZone.run()にコードを書く必要もありません。

constructor(private activatedRoute: ActivatedRoute, 
     private api: ApiService, private ngZone: NgZone, 
     private youtubeService: YoutubeService) {} 

ngOnInit() { 
    this.activatedRoute.params.subscribe((params: Params) => { 
    this.video = params['name']; 

    this.api.getVideo({ name: this.video }).then((sucesso) => { 

     this.lyrics = sucesso['lyrics']; 

     this.youtubeService.startPlayer(this.song, this.lyrics); 

     this.youtubeService.broadcast.subscribe((value) => { 
      this.lyricShow = value.lyric; 
      this.actual = value.actual; 
     }); 
    }); 
    }); 
}