2

我的 Angular 版本：Angular 7

我刚开始学习 Angular，我正在尝试在我的 Angular 项目中使用下载的 Bootstrap 模板。当它在我的 Angular 项目中运行时，我owl-carousel的作品很棒。index.html但是当它移动到一个新组件时它不会。我将提供我遵循的步骤。请帮我解决问题

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

步骤 2：将模板中 index.html 中的代码复制到 angular index.html 中，并更改 index.html 中图像和 JS 文件的“src”

  • 在这一点上，一切正常！

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

以下是我的 Angular 项目中的完整代码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

提前致谢。

4

1 回答 1

1

你什么时候初始化猫头鹰旋转木马？因为索引页面与应用程序一起加载，因此它在索引中工作，但组件页面仅在其导航时加载，因此您需要在组件加载到 DOM 后显式调用 owl 初始化

$(".owl-carousel").owlCarousel();
于 2019-03-27T07:13:18.853 回答