将代码移动到 Angular 组件时，猫头鹰轮播不起作用 [英] Owl carousel not working when code is moved to an Angular component

查看：25
本文介绍了将代码移动到 Angular 组件时，猫头鹰轮播不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 Angular 版本:Angular 7

我刚开始学习 Angular，我正在尝试在我的 Angular 项目中使用下载的 Bootstrap 模板.我的 owl-carousel 在我的 Angular 项目中的 index.html 上工作得很好.但是当它被移动到一个新组件时就不会了.我将提供我遵循的步骤.请帮我排查问题

第 1 步:我将所有资产(JS、CSS 和图像)复制到 Angular 中 src 下的资产文件夹

第2步:将模板中index.html中的代码复制到angular index.html中，修改index.html中图片和JS文件的'src'

  • 此时，一切正常！

第 3 步:由于将所有内容保存在一个文件中并不是一个好习惯，因此我尝试通过将基于owl-carousel"的 home-slider 移动到一个组件来重构代码如下称为家"

下面是 home-component.html 中的全部代码，所有的导入，如 Javascript 和 CSS 已经在 index 中.html 我的 Angular 项目

<section class="welcome-area"><div class="welcome-slides owl-carousel"><!-- 单张欢迎幻灯片 --><div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);"data-img-url="macbook-1.jpg"><!-- 欢迎内容--><div class="welcome-content h-100"><div class="container h-100"><div class="row h-100 align-items-center"><!-- 欢迎文本--><div class="col-12"><div class="welcome-text text-center"><h6 data-animation="fadeInLeft" data-delay="200ms">创意&amp;卓越<h2 data-animation="fadeInLeft" data-delay="500ms">欢迎来到我的网站</h2><a href="#" class="btn roberto-btn btn-2" data-animation="fadeInLeft" data-delay="800ms">探索我们的工作</a>

<!-- 单张欢迎幻灯片 --><div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);"data-img-url="macbook-1.jpg"><!-- 欢迎内容--><div class="welcome-content h-100"><div class="container h-100"><div class="row h-100 align-items-center"><!-- 欢迎文本--><div class="col-12"><div class="welcome-text text-center"><h6 data-animation="fadeInDown" data-delay="200ms">酒店&amp;度假村</h6><h2 data-animation="fadeInDown" data-delay="500ms">欢迎来到我的网站 </h2><a href="#" class="btn roberto-btn btn-2" data-animation="fadeInDown" data-delay="800ms">立即发现</a>

</节>

当使用 在 app-component.html 中选择组件时，我希望代码有一个有效的 owl-carousel 滑块.</app-home> 但实际输出什么也没给出.

注意:选择器是正确的，就像我给出纯文本并在 app-component.html<中将选择器调用为 /code> 它有效但不是 owl-carousel

提前致谢.

解决方案

你什么时候初始化 owl carousel?因为索引页面随应用程序一起加载，因此它在索引中工作，但组件页面仅在导航时加载，因此您需要在组件加载到 DOM 后显式调用 owl 初始化

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

My Angular Version: Angular 7

I just started learning Angular and I'm trying to use a downloaded Bootstrap template in my Angular project. My owl-carousel works great when it's on index.html in my Angular project. But it does not when it's moved to a new component. I'll be providing the steps I followed. Kindly help me troubleshoot

Step 1: I copied all assets (JS, CSS & Images) to the assets folder under src in Angular

Step 2: Copies the code in index.html in the template to the angular index.html and changed the 'src' for images and JS files in index.html

Step 3: Since it's not a good practice to keep everything in one file so I tried to refactor the code by moving the home-slider which is based on 'owl-carousel' to a component called 'home' as below

Below is the entire code in home-component.html and all imports such as Javascript and CSS are already in index.html of my Angular Project

<!-- 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>

I expected the code to have a working owl-carousel slider when the component is selected in app-component.html using <app-home></app-home> but the actual output just gives nothing.

Note: The selector is right as if I give plain text and call the selector as <app-home></app-home> in app-component.html it works but not the owl-carousel

Thanks in advance.

解决方案

when are you initialising the owl carousel? because index page loads with the application and hence its working in index, but component page only loads when its navigated so you need to call owl initialising explicitly after component is loaded into DOM

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

这篇关于将代码移动到 Angular 组件时，猫头鹰轮播不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆