Angular如何在HTML中添加jQuery

Question

我正在尝试在我的代码中实现Jquery。 首先，我将其添加到index.html中，当我们到达页面时它可以工作，但不适用于路由器链接：

<script>

    $(document).ready(function(){
                $('.customer-logos').slick({
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    autoplay: true,
                    autoplaySpeed: 5000,
                    arrows: false,
                    dots: false,
                    pauseOnHover: false,
                    responsive: [{
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 3
                        }
                    }, {
                        breakpoint: 520,
                        settings: {
                            slidesToShow: 3
                        }
                    }]
                });
    });
    </script>

如果我希望它起作用，则需要使用href。 但是我不想。 所以我试图在html组件中添加脚本：

<div class="background-color-white">
    <section class="customer-logos slider slider-override">
        <div class="slide box">
            <img
                src="http://fr.web.img3.acsta.net/r_1280_720/pictures/16/12/05/14/10/494493.jpg"
            />
            <button class="btn-format">4k</button>
            <button class="btn-duree">120m</button>
            <div class="box-content">
                <h3 class="title">MoonLight</h3>
                <span class="post">18 nov 2018</span>
                <ul class="icon">
                    <li>
                        <a href="#"><i class="fa fa-search"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-play"></i></a>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</div>
<script>
        $(document).ready(function(){
                    $('.customer-logos').slick({
                        slidesToShow: 3,
                        slidesToScroll: 1,
                        autoplay: true,
                        autoplaySpeed: 5000,
                        arrows: false,
                        dots: false,
                        pauseOnHover: false,
                        responsive: [{
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 3
                            }
                        }, {
                            breakpoint: 520,
                            settings: {
                                slidesToShow: 3
                            }
                        }]
                    });
        });
        </script>

但这不起作用

Answer 1

模板html中的脚本标签将无法工作。 它们只能添加到index.html中。 如果它们在模板html中，则按角度将其删除。 为了使jQuery代码正常工作，您可以将其添加到尝试使用它的组件ts文件的ngOnInit生命周期挂钩中。 另外，必须在组件中声明$变量，以便tslint允许您在组件中使用它。 请参阅以下示例：

import { Component, OnInit } from '@angular/core';
declare var $;//jquery var declaration
@Component({
  selector: 'test-page',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestPageComponent implements OnInit {
  ngOnInit() {
    $(document).ready(function () {
      $('.customer-logos').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        dots: false,
        pauseOnHover: false,
        responsive: [{
          breakpoint: 768,
          settings: {
            slidesToShow: 3
          }
        }, {
          breakpoint: 520,
          settings: {
            slidesToShow: 3
          }
        }]
      });
    });
  }
}

但是，始终避免在角度应用程序中使用jQuery始终是一个好主意。