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始終是一個好主意。