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

Question

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

Answer 1

Если вы хотите обнаруживать для мобильных устройств или настольных компьютеров, вы можете использовать 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 Карусель, кажется, не работает, просто изменяя входные элементы itemsPerSlide, можно попытаться уничтожить узел, а затем внедрить новую карусель с помощью API ViewChild и TemplateRef .

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