Angular Universal (SSR)和路由器动画首先加载/触发

Question

我遇到了Angular Universal和router动画的问题。我的情况很简单，但很难解决(至少对我来说)。Universal呈现HTML文档并将其发送给浏览器。然后angular浏览器应用被下载，当它下载并触发时，路由器出口动画就会被触发。它看起来很糟糕，好像组件正在被重新加载/刷新。这只是第一个初始动画触发器的情况。

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

我使用"npm run dev:ssr"命令。这个问题在使用网络节流时很容易发现，例如"快速3g">

有没有人有一个想法，如果我做错了什么，还是它是一个内部设计问题?

Answer 1

这更像是一个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>

Answer 2

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

对于您的示例，这是有效的:

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>