Невозможно динамически изменять элементы на слайде в компоненте Carousel ngx-bootstrap

Я пытаюсь изменить количество элементов, которые карусель отображает во время выполнения, причина этого в том, что моя страница поддерживает небольшие устройства, такие как смартфоны, моя идея состоит в том, чтобы отображать только 2 элемента на слайде, когда пользователь видит страницу в своем/ ее смартфон, но каждый раз, когда я меняю значение, прикрепленное к itemsPerSlide карусели, оно вообще не меняется. Я делаю что-то не так, вы можете проверить это поведение в следующем stackbizz - Изменять элементы на демо-слайде


javascript angular ngx-bootstrap
person Alexisvt    schedule 14.01.2020    source источник
comment
Привет! Чтение того, чего вы пытаетесь достичь, может быть выполнено при компиляции с помощью целевого устройства или это не вариант для вас?   -  person Lucho    schedule 16.01.2020
comment
Что ж, это может быть вариантом, но не могли бы вы поделиться примером своей точки зрения, чтобы увидеть ее более четко? Спасибо   -  person Alexisvt    schedule 16.01.2020
comment
ваша ссылка не работает   -  person benshabatnoam    schedule 26.08.2020
comment
вы правы, свойство itemsPerSlide влияет на карусель только при инициализации, поэтому, если значение изменится, ничего не произойдет. Это облом, согласен. В репозитории ngx-bootstrap есть открытая проблема, пожалуйста, проголосуйте за .   -  person benshabatnoam    schedule 26.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите обнаружить для мобильных устройств или настольных компьютеров, вы можете использовать API navigator.userAgent (другие подходы) во время компиляции, а не во время выполнения. Вот рабочая вилка пример, который я опробовал на устройстве iOS, используя следующий TS:

private mobileDevice(): boolean {
  return navigator.userAgent.match(/Android/i)
    ||  navigator.userAgent.match(/webOS/i)
    ||  navigator.userAgent.match(/iPhone/i)
    ||  navigator.userAgent.match(/iPad/i)
    ||  navigator.userAgent.match(/iPod/i)
    ||  navigator.userAgent.match(/BlackBerry/i)
    ||  navigator.userAgent.match(/Windows Phone/i)
    ? true : false;
}

Однако, если вы хотите, чтобы это работало, переключаясь во время выполнения, поскольку карусель ngx-bootstrap, похоже, не работает, просто изменяя входные элементыPerSlide, можно попытаться уничтожить узел, а затем внедрить новую карусель с помощью ViewChild и TemplateRef API.

Попробуйте прочитать этот post, если вы не можете понять это из дайте мне знать для решения.

person Lucho    schedule 16.01.2020