Owl Carousel Slider 在 Angular 组件中不工作，但在 Index.html 中工作

Question

我正在从事 Angular 8 项目。我从其他网站下载了一个示例 html 模板，并通过创建组件将其集成到 angular 8 项目中。 我已经在 angular.json 文件中设置了所有的 css 和 javascipts。我还在 tsconfig.json 文件中使用了 allowjs =true 。下面是我的 angular.json 文件的一部分：

 "styles": [
          "src/styles.css",
          "src/assets/css/bootstrap.min.css",
          "src/assets/css/animate.css",
          "src/assets/css/owl.carousel.min.css",
          "src/assets/css/all.css",
          "src/assets/css/flaticon.css",
          "src/assets/css/themify-icons.css",
          "src/assets/css/magnific-popup.css",
          "src/assets/css/slick.css",
          "src/assets/css/style.css"
        ],
        "scripts": [
          "src/assets/js/jquery-1.12.1.min.js",
          "src/assets/js/popper.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/jquery.magnific-popup.js",
          "src/assets/js/owl.carousel.min.js",
          "src/assets/js/jquery.nice-select.min.js",
          "src/assets/js/slick.min.js",
          "src/assets/js/jquery.counterup.min.js",
          "src/assets/js/waypoints.min.js",
          "src/assets/js/contact.js",
          "src/assets/js/jquery.ajaxchimp.min.js",
          "src/assets/js/jquery.form.js",
          "src/assets/js/jquery.validate.min.js",
          "src/assets/js/mail-script.js",
          "src/assets/js/custom.js"
        ]
      },

如果我的解决方案中有外部 js，我不想安装 owl carousel。我只是想让它工作。 我在这里的问题是，当我将滑块的代码放在 index.html 中时，它可以顺利运行。但如果我将它放在 app.component.html 或任何其他 html 文件中，它就不起作用。下面是滑块代码：

 <!-- client review part here -->


<section class="client_review">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="client_review_slider owl-carousel">
                    <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                     <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                    <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- client review part end -->

Answer 1

当我将一些代码从现成的 html css 模板移动到 angular 组件时，我也发生了同样的事情，我从这里解决了我的问题：Owl carousel not working when code is moved to an Angular component，

它只显示轮播，按钮仍然不可见，所以，我查看了检查元素，发现按钮被禁用。所以，我在这里找到了按钮的解决方案：https://www.gitmemory.com/issue/OwlCarousel2/OwlCarousel2/1809/480576398。

不过，它在按钮中显示的文本不是上一个和下一个图标，而是“上一个”和“下一个”，所以，我在这里找到了该问题的解决方案：https://github.com/OwlCarousel2/OwlCarousel2/issues/1354。

所以，我的最终代码是这样的：

//Declare jquery
declare var jQuery: any;

 ngAfterViewInit() {
(function ($) {
  $(document).ready(function () {
    $('.owl-carousel').owlCarousel({
      nav: true,
      navText: ["<i class='lni-chevron-left'></i>", "<i class='lni-chevron-right'></i>"],
      items: 3,
      loop: true,
      center: true,
      margin: 0,
      lazyLoad: true,
      dots: false
    });
  });
})(jQuery);

只需将此代码放入您的组件中，希望对您有所帮助。