Карусель сов не работает, когда код перемещается в угловой компонент - PullRequest
Новая
       19

Карусель сов не работает, когда код перемещается в угловой компонент

0 голосов
/ 27 марта 2019

Моя угловая версия: Угловая 7

Я только начал изучать Angular и пытаюсь использовать загруженный шаблон Bootstrap в своем проекте Angular. Мой owl-carousel отлично работает, когда он включен на index.html в моем проекте Angular. Но это не так, когда он перемещен в новый компонент. Я предоставлю шаги, которым я следовал. Пожалуйста, помогите мне устранить неполадки

Шаг 1. Я скопировал все ресурсы (JS, CSS и изображения) в папку ресурсов в src в Angular

Шаг 2. Копирует код из index.html в шаблоне в угловой файл index.html и изменяет src для изображений и файлов JS в index.html

  • На данный момент все работает ОТЛИЧНО!

Шаг 3: Поскольку не рекомендуется хранить все в одном файле, я попытался изменить код, переместив home-slider, основанный на owl-carousel, в компонент, называемый home, как показано ниже

Ниже приведен весь код в home-component.html, и все операции импорта, такие как Javascript и CSS, уже находятся в index.html моего углового проекта 

<!-- Welcome Area Start -->
<section class="welcome-area">
  <div class="welcome-slides owl-carousel">
      <!-- Single Welcome Slide -->
      <div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
          <!-- Welcome Content -->
          <div class="welcome-content h-100">
              <div class="container h-100">
                  <div class="row h-100 align-items-center">
                      <!-- Welcome Text -->
                      <div class="col-12">
                          <div class="welcome-text text-center">
                              <h6 data-animation="fadeInLeft" data-delay="200ms">Creativity &amp; Excellence</h6>
                              <h2 data-animation="fadeInLeft" data-delay="500ms">Welcome to to my Web</h2>
                              <a href="#" class="btn roberto-btn btn-2" data-animation="fadeInLeft" data-delay="800ms">Explore our work</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <!-- Single Welcome Slide -->
      <div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
          <!-- Welcome Content -->
          <div class="welcome-content h-100">
              <div class="container h-100">
                  <div class="row h-100 align-items-center">
                      <!-- Welcome Text -->
                      <div class="col-12">
                          <div class="welcome-text text-center">
                              <h6 data-animation="fadeInDown" data-delay="200ms">Hotel &amp; Resort</h6>
                              <h2 data-animation="fadeInDown" data-delay="500ms">Welcome To my Web </h2>
                              <a href="#" class="btn roberto-btn btn-2" data-animation="fadeInDown" data-delay="800ms">Discover Now</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</section>

Я ожидал, что код будет иметь работающий ползунок owl-carousel, когда компонент выбран в app-component.html с использованием <app-home></app-home>, но фактический вывод просто ничего не дает.

Примечание: селектор прав, как будто я даю простой текст и называю селектор как <app-home></app-home> в app-component.html, он работает, но не owl-carousel

Заранее спасибо.

1 Ответ

0 голосов
/ 27 марта 2019

когда вы инициализируете сову-карусель?поскольку страница индекса загружается вместе с приложением и, следовательно, работает в индексе, но страница компонента загружается только при перемещении, поэтому вам необходимо явно вызвать инициализацию owl после загрузки компонента в DOM 

$(".owl-carousel").owlCarousel();
...