在 Angular 中的路由/视图更改之前执行动画

Question

我有一个问题：

• 在 Angular 中的路由/视图更改之前执行动画。
• 当点击路线/视图更改按钮时 - 在进行路线/视图更改之前会显示一个警报弹出窗口几秒钟。

我是 Angular 和 Typescript 的新手，所以如果您需要任何说明，请保持温和，告诉我。

先谢谢了！

埃里克

Answer 1

实现这一点的一种方法是使用 Angular Animations 的 (@animation.done) 功能，这样您就可以在该动画完成执行后更改路线。我制作了一个StackBlitz example，其中，当您单击按钮时，会显示一个弹出窗口并询问您是否要更改路线。如果是这样，动画就会开始运行，一旦完成，页面就会发生变化。

我是这样做的：

component.ts

export class PersonComponent {
  state = 'left';
  changeRoute = false;

  constructor(private router: Router) { }

  goTo() {
    if (this.changeRoute) {
      this.router.navigate(['hello']);
    }
  }

  confirm() {
    if (confirm("Are you sure you want to go to hello page ?")) {
      this.changeRoute = true;
      this.runAnimation();
    }
  }

  runAnimation() {
    this.state = 'left';
    this.state = 'right';
  }
}

component.html

<h1>Person page</h1>
  <button (click)="confirm()">Go to Hello page</button>

<div class="bar bar-div"></div>
<div [@load]="state" (@load.done)="goTo()" class="loading-bar bar-div"></div>

进度条完成后，页面会发生变化。