Question

我倾向于使用Angular并尝试在Angular中创建较旧的项目。

其中一个有一个非常简单的字幕功能，在YouTube API的onReady中我使用setInterval来验证youtube视频的进度并检查我将显示的文本。我创建了YouTube服务，没关系，我的问题是：在我找到文本之后如何返回组件并在没有停止间隔循环的HTML中显示它。

我最好的尝试是ReplaySubject，我创建一个变量并返回.next

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

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

在我的组件中，我使用了subscribe

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;
        });
      });
    });
  });
}

有了它，我可以更新组件中的变量并显示但有延迟。如果我在component中使用这个函数=没有延迟但是在服务中我有一点延迟（间隔+延迟）。

可以毫无延迟地将变量返回到组件，是否可以？

由于

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;
      });
    });
  });
}

如何在服务Angular 4

1 个答案: