Question

我有这个代码，它有两个功能： say()将播放音乐（已实施且有效）并router进入下一页（也可以）

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

但我想做的是播放音乐（需要5秒），然后转到下一页......我怎么能实现这个？...我想，我必须实现某种{ {1}}，但我无法通过delay找到此类参数。

Answer 1

setTimeout（function，milliseconds）等待后执行一个函数指定的毫秒数。

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

Answer 2

您可以利用RxJS来实现这一目标。通过使say()使用Observable.create返回一个observable，只要它完全完成，您就可以异步发出一个值。在go_next()范围内，您可以利用delay()等待任何时间，然后再对subscribe()内的发布值执行操作。在这种情况下，say()的发射值可以是任何值，您只需要调用next()来发出某种值。

此模式可以允许您在必要时处理错误和完成状态say（），或者取决于say()的结构，允许多个订阅者对其的值/错误/完成做出反应。< / p>

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。

希望这有帮助！

Answer 3

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

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],

Angular2中路由器的延迟

3 个答案: