Angular, как добавить JQuery в HTML

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 работал, вы можете добавить его в хук жизненного цикла ngOnInit файла ts компонента, в котором вы пытаетесь его использовать. Кроме того, вы должны объявить переменную $ в компоненте, чтобы 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 в своем угловом приложении.