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

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

0 голосов
/ 23 октября 2019

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

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

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

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

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

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

  3. Начать смахивать синие деления.

Что здесь происходит?

1 Ответ

1 голос
/ 23 октября 2019

Ваш 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

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

...