如何侦听 Angular 2 本机页面更改事件并防止默认

Question

如何

侦听路由更改开始时触发的事件？如何阻止该事件？根据文档，事件对象似乎没有任何方法可以阻止这种情况。

this.router.events
  .filter(event => event instanceof NavigationStart)
  .subscribe((event) => {
    console.log(event);
    event.preventDefault(); // NavigationStart doesn't have this method
  });

停止后，如何以编程方式再次触发路由更改？

我的最终目标是将路由更改延迟约 1 秒，以允许页面更改动画完成。因此，退出时页面更改动画。

Answer 1

在HTML中它将是：

(click)="timedFunction()"

并且该函数将在完成后执行定时动画和路由。

时间动画完成后：

this.router.navigate([route])

Answer 2

Yo不需要

手动处理这种情况，Angular会为你做这件事

只需使用 [路由解析器]https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

此函数的结果可以是可观察的 o 承诺当此承诺已解决或可观察时，将加载页面

延迟页面加载的演示：http://embed.plnkr.co/u2qR9J/

但是要回答与注册事件相关的第一个问题，请参阅以下内容：在 Angular 2 中在路线之间导航时显示加载屏幕

在[路由解析器]中启动动画，并在动画完成后解析承诺