与 swiper 结合使用时奇怪的 ngx-translate 行为

Question

在我的网站上，我有 swiper，它基本上是一个小型库，可以让容器 div 可滑动。在这些 div 中，我有一些我用 ngx-translate 翻译的文本内容。

我的可滑动 div 处于循环状态。我有一些奇怪的问题，当我滑动所有这些时，我再次看到第一个，然后翻译的文本消失了。我试图在 stackblitz 上重现问题，但我不能。相反，当我开始滑动时，stackblitz 文本只是没有被翻译。

我认为这两个错误的原因是相同的，只是在 stacblitz 我以其他方式提取翻译 - 在项目中我使用 http 导入 json 文件，在 stackblitz 上我以编程方式创建翻译。

要查看错误，请按照以下步骤操作：

1. 打开https://stackblitz.com/edit/angular-with-swiper-9kv25l?file=app%2Fapp.component.html

2. 点击按钮“更改语言为波兰语”

3. 开始刷蓝色 div。

这是怎么回事？

Answer 1

您的 swiper 会创建原始 div 的副本。这些副本类似于纯 html，当您更改语言时，只有原始 div 更改了文本。在控制台中查看。你会看到在 app.component.html 中会生成 3 个 div，但是在 swiper 启动后会有更多的 div（9 个？）。

如果您在 swiper 中禁用循环，您会看到所有 div 都已正确更改文本。

更新：

更改语言后，您可以使用this.swiper.destroy() 并使用相同的值重新初始化它。然后它将创建带有翻译文本的副本 div。你也应该使用setTimeout，因为在角度变化翻译时会有小的延迟。

您更改的代码：https://stackblitz.com/edit/angular-with-swiper-5bgbhv?file=app/app.component.ts

它不是很漂亮，但很有效。