在Angular中进行路线/视图变化之前执行动画

Question

我有一个问题：

• 在Angular中进行路线/视图变化之前执行动画。
• 单击路由/视图更改按钮时 - 然后，在进行路由/查看变更之前，警报弹出窗口将显示几秒钟。

我是Angular and Typescript的新手，所以请保持温柔，并告诉我您是否需要澄清。

谢谢！

erik

Answer 1

一种意识到这将是使用Angular Animations的功能(@animation.done)，这样您就可以在此动画完成执行后可以更改路由。我做了一个stackblitz示例，当您单击按钮时，弹出窗口显示并询问您是否想更改路线。如果是这样，动画开始运行，完成后，页面会更改。

这是我的工作方式：

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>

进度栏完成后，页面会更改。