Question

我的Angular版本：Angular 7

我刚开始学习Angular，并且试图在Angular项目中使用下载的Bootstrap模板。我的owl-carousel在Angular项目中的index.html上运行时效果很好。但是，当它移到新组件时不会。我将提供我遵循的步骤。请帮助我

步骤1：我将所有资产（JS，CSS和图像）复制到Angular src下的资产文件夹中

第2步：将模板中index.html中的代码复制到有角度的index.html中，并更改index.html中图像和JS文件的'src'

至此，一切正常！

第3步：由于将所有内容保存在一个文件中不是一种好习惯，因此我尝试通过将基于“猫头鹰轮播”的home-slider移至名为“ home”的组件来重构代码。下面

下面是home-component.html中的整个代码，并且所有导入，例如Javascript和CSS都已经在我的Angular Project的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

无效

谢谢。

Answer 1

您何时初始化猫头鹰传送带？因为索引页随应用程序一起加载，因此可以在索引中工作，但是组件页仅在其导航时才加载，因此您需要在将组件加载到DOM后显式调用owl初始化

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

将代码移至Angular组件时，猫头鹰轮播无法正常工作

1 个答案: