Странное поведение ngx-translate в сочетании с swiper

На моем сайте у меня есть swiper, который представляет собой небольшую библиотеку, позволяющую пролистывать контейнерные div. В этих div у меня есть текстовый контент, который я перевожу с помощью ngx-translate.

Мои прокручиваемые div находятся в цикле. У меня странная проблема: когда я смахиваю их все и снова вижу первый, переведенный текст исчезает. Я попытался воспроизвести проблему на stackblitz, но не смог. Вместо этого в stackblitz текст просто не переводится, когда я начинаю смахивать.

Я думаю, что причина этих двух ошибок одна и та же, только в stacblitz я беру переводы другим способом - в проекте я импортирую файл json с http, в stackblitz я создаю перевод программно.

Чтобы увидеть ошибку, выполните следующие действия:

  1. Откройте https://stackblitz.com/edit/angular-with-swiper-9kv25l?file=app%2Fapp.component.html

  2. Нажмите кнопку «изменить язык на полировку».

  3. Начните смахивать синие div.

Что тут происходит?


javascript angular swiper ngx-translate
person BT101    schedule 23.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ваш swiper создает копию ваших исходных div. Эта копия похожа на чистый html, и когда вы меняете язык, только оригинальные div меняют текст. Посмотри в консоли. Вы увидите, что в app.component.html будет сгенерировано 3 div, но после запуска swiper будет больше div (девять?).

Если вы отключите цикл в swiper, вы увидите, что все ваши div правильно изменили текст.

ОБНОВИТЬ:

После изменения языка вы можете использовать this.swiper.destroy() и повторно инициализировать его с теми же значениями. Затем он создаст копии div с переведенным текстом. Возможно, вам также следует использовать setTimeout из-за небольшой задержки при переводе угловых изменений.

Ваш измененный код: https://stackblitz.com/edit/angular-with-swiper-5bgbhv?file=app/app.component.ts.

Это не так красиво, но работает.

person deoomen    schedule 23.10.2019
comment
Но что, если я не хочу отключать функцию цикла? - person BT101; 23.10.2019
comment
Я обновил свой ответ решением - может быть, не так красиво, но работает. - person deoomen; 23.10.2019
comment
Да, не совсем согласен - person BT101; 23.10.2019