与 swiper 结合时奇怪的 ngx-translate 行为
Weird ngx-translate behavior when combined with swiper
在我的站点上，我有 swiper，它基本上是一个小型库，可以使容器 div 可滑动。在那些 div 中，我有一些我用 ngx-translate 翻译的文本内容。
我的可滑动 div 在循环中。我有一些奇怪的问题，当我滑动所有这些时，我再次看到第一个，然后翻译的文本消失了。我试图在 stackblitz 上重现问题，但我做不到。相反，当我开始滑动时，stackblitz 文本不会被翻译。
我认为这两个错误的原因在 stacblitz 中是相同的，我以其他方式提取翻译 - 在项目中，我使用 http 导入 json 文件，在 stackblitz 中，我以编程方式创建翻译。
要查看错误，请按照以下步骤操作：
打开https://stackblitz.com/edit/angular-with-swiper-9kv25l?file=app%2Fapp.component.html
点击按钮"change lang to polish"
开始滑动蓝色div。
这是怎么回事？
您的滑动器创建原始 div 的副本。这些副本类似于纯 html，当您更改语言时，只有原始 div 更改了文本。在控制台中查看。你会看到在 app.component.html 中会生成 3 个 div，但在 swiper 启动后会有更多的 div（九个？）。
如果您在滑动器中禁用循环，您会看到所有 div 都已正确更改文本。
更新：
更改语言后，您可以使用 this.swiper.destroy() 并使用相同的值重新初始化它。然后它将创建带有翻译文本的副本 div。您可能还应该使用 setTimeout，因为 angular 更改翻译时会有小延迟。
您更改的代码：https://stackblitz.com/edit/angular-with-swiper-5bgbhv?file=app/app.component.ts
它不是很漂亮，但很管用。
在我的站点上，我有 swiper，它基本上是一个小型库，可以使容器 div 可滑动。在那些 div 中，我有一些我用 ngx-translate 翻译的文本内容。
我的可滑动 div 在循环中。我有一些奇怪的问题，当我滑动所有这些时，我再次看到第一个，然后翻译的文本消失了。我试图在 stackblitz 上重现问题，但我做不到。相反，当我开始滑动时，stackblitz 文本不会被翻译。
我认为这两个错误的原因在 stacblitz 中是相同的，我以其他方式提取翻译 - 在项目中，我使用 http 导入 json 文件，在 stackblitz 中，我以编程方式创建翻译。
要查看错误，请按照以下步骤操作：
打开https://stackblitz.com/edit/angular-with-swiper-9kv25l?file=app%2Fapp.component.html
点击按钮"change lang to polish"
开始滑动蓝色div。
这是怎么回事？
您的滑动器创建原始 div 的副本。这些副本类似于纯 html，当您更改语言时，只有原始 div 更改了文本。在控制台中查看。你会看到在 app.component.html 中会生成 3 个 div，但在 swiper 启动后会有更多的 div（九个？）。
如果您在滑动器中禁用循环，您会看到所有 div 都已正确更改文本。
更新：
更改语言后，您可以使用 this.swiper.destroy() 并使用相同的值重新初始化它。然后它将创建带有翻译文本的副本 div。您可能还应该使用 setTimeout，因为 angular 更改翻译时会有小延迟。
您更改的代码：https://stackblitz.com/edit/angular-with-swiper-5bgbhv?file=app/app.component.ts
它不是很漂亮，但很管用。