当代码移动到 Angular 组件时，猫头鹰轮播不起作用

Question

My Angular Version： Angular 7

我刚刚开始学习 Angular，我正在尝试在我的 Angular 项目中使用下载的 Bootstrap 模板。我的owl-carousel在我的 Angular 项目中index.html时效果很好。但是当它移动到新组件时，它不会。我将提供我遵循的步骤。请帮我排除故障

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

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

• 在这一点上，一切都很完美！

第 3 步：由于将所有内容保存在一个文件中不是一个好习惯，所以我尝试通过将基于"猫头鹰轮播"的home-slider移动到名为"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>

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

注意：选择器是正确的，就好像我给出纯文本并按<app-home></app-home>调用选择器一样，app-component.html它有效，但owl-carousel

提前谢谢。

Answer 1

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

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