Angular 通用（SSR）和路由器动画首次加载/触发

Question

我遇到了 Angular 通用动画和路由器动画的问题。我的情况很简单但很难解决（至少对我而言）。 Universal 呈现 HTML 文档并将其发送到浏览器。然后正在下载 angular 浏览器应用程序，当它下载并触发时，将触发路由器出口动画。看起来很糟糕，好像组件正在 reloaded/refreshed。这只是第一个初始动画触发的情况。

我创建了一个 repo 来重现这个问题：https://github.com/BazylPL/angular-ssr-router-test

为了让它继续运行，我使用“npm 运行 dev:ssr”命令。使用网络节流时很容易发现问题，例如“fast 3g”

有人知道我做错了什么还是内部设计问题？

Answer 1

我已经通过在通用渲染中隐藏这些类型的元素解决了这个问题。

对于您的示例，这有效：

app.component.ts:

export class AppComponent {
   show = false;
   constructor(@Inject(PLATFORM_ID) platformId: string) {
    if (isPlatformBrowser(platformId)) {
      this.show = true;
    }
  }
  title = "ssr-router-test";
}

app.component.html:

<div
  [@routeAnimations]="o.isActivated ? o.activatedRoute : ''"
  [style.opacity]="show ? 100 : 0"
>
  <router-outlet #o="outlet"></router-outlet>
</div>

Answer 2

这更像是 hack，但您只能在第一个导航结束后启用动画。

component.ts

public enableAnimation = false;

constructor(private router: Router)
{

    router.events.subscribe(ev => {
      if (ev instanceof NavigationEnd && !this.enableAnimation)
      {
        setTimeout(() => this.enableAnimation = true, 10);//settimeout to not trigger animation right at the end of this cycle
      }
    }):
}

component.html

<div [@routeAnimations]="o.isActivated && enableAnimation? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
</div>

Angular 通用（SSR）和路由器动画首次加载/触发

Angular Universal (SSR) and router animation first load / trigger

angular-universal

angular

angular-animations