页面加载时的 Angular Universal ngx-translate 从默认语言闪烁，然后切换到其他选定的语言

Question

我有一个有英语和印地语两种语言的网站，是用 ngx-translate Angular 14 完成的。 出于 SEO 目的，我添加了 Angular Universal，它是服务器端渲染，但是当我从英语切换到印地语并重新加载页面时，页面首先加载英语内容，然后切换到 json 键，然后加载印地语。

我需要直接加载印地语，没有任何闪烁。我尝试了几乎所有堆栈溢出的链接都不起作用。我尝试安装 ngx-translate-cache 但它与 Angular 14 版本不兼容。 我该如何解决这个问题？

Answer 1

你可以使用

use

方法并像这样等待：

....
 translate.use(langToSet).subscribe(() => {
        console.info(`Successfully initialized '${langToSet}' language.'`);
        this.loading = false;
      }, err => {
        console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
....

然后制作加载屏幕并使用

ng-if

。如果全部初始化，请将

loading

之类的变量设置为 false 并显示您的内容

<div *ng-if="loading">Loading...</div>
<div *ng-if="!loading">Your content</div>

这是常见的方式，你可以看这里。