我的 Angular 版本:Angular 7
我刚刚开始学习 Angular,并尝试在我的 Angular 项目中使用下载的 Bootstrap 模板。我的owl-carousel
打开时效果很好index.html
在我的 Angular 项目中。但当它移动到新组件时就不会了。我将提供我遵循的步骤。请帮我解决问题
第1步:我将所有资源(JS、CSS和图像)复制到Angular中src下的资源文件夹中
步骤2:将模板中index.html中的代码复制到角度index.html,并更改index.html中图像和JS文件的“src”
第 3 步:由于将所有内容都保存在一个文件中并不是一种好的做法,因此我尝试通过移动home-slider
它基于“owl-carousel”到名为“home”的组件,如下所示
下面是完整的代码home-component.html
以及所有进口产品,例如Javascript
and CSS
已经在index.html
我的 Angular 项目
<!-- 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 & 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 & 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
using <app-home></app-home>
但实际输出什么也没给出。
注意:选择器是正确的,就像我给出纯文本并将选择器称为<app-home></app-home>
in app-component.html
它有效,但不是owl-carousel
提前致谢。
你什么时候初始化猫头鹰旋转木马?因为索引页面随应用程序一起加载,因此它在索引中工作,但组件页面仅在导航时加载,因此您需要在组件加载到 DOM 后显式调用 owl 初始化
$(".owl-carousel").owlCarousel();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)