Angular2中路由器的延迟答案

【问题标题】：Delay for router in Angular2Angular2中路由器的延迟
【发布时间】：2017-12-31 19:52:17
【问题描述】：

我有这段代码，它有两个功能： say() 将播放音乐（已实现并且有效）和router 导致下一页（它也有效）

go_next() {
     this.say(); // audio
     this.router.navigate( ['app'], { queryParams: { 'part': this.part+1 } } ); //go to next page 
}

但我想做的是播放音乐（需要 5 秒）然后转到下一页...我该如何实现呢？..我想，我必须实现某种 @ 987654325@，但是router.navigate找不到这样的参数。

【问题讨论】：

stackoverflow.com/questions/37710936/…

标签： angular typescript angular-ui-router

【解决方案1】：

您可以在路线上使用解析。

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

@Injectable()
export class DelayResolve implements Resolve<Observable<any>> {

  constructor() {
  }

  resolve(): any {
    return Observable.of('delayed navigation').delay(500);
  }
}

然后它的路由只是应用解析：

path: 'yourpath',
component: YourComponent,
resolve: [DelayResolve],

【讨论】：

【解决方案2】：

setTimeout(function, milliseconds) 执行一个函数，等待后指定的毫秒数。

go_next(){
    setTimeout(() => {
        this.router.navigate(['app'], {queryParams: {'part': this.part + 1}})
      }
      , 5000);
}

【讨论】：

【解决方案3】：

您可以利用 RxJS 来实现这一点。通过使用Observable.create 使say() 返回一个可观察对象，您可以在它完全完成时异步发出一个值。在go_next() 中，您可以利用delay() 等待任意时间，然后再对subscribe() 中发出的值进行操作。在这种情况下，say() 发出的值可以是任何值，您只需调用 next() 即可发出某种值。

此模式可以让您在必要时处理 say() 的错误和完成状态，或者根据say() 的结构，允许多个订阅者对其值/错误/完成做出反应。

say(): Observable<any> {
  return Observable.create(observer => {
    // some logic goes here
    // emit value when completed
    observer.next(true);
  });
}

go_next() {
  this.say().delay(5000).subscribe(() => {
      // this.router.navigate( ['app'], { queryParams: { 'part': this.part+1 } } );
  });
}

这是一个 plunker 演示功能。

希望对您有所帮助！

【讨论】：