如何在angular4中使用带有光滑滑块的jquery

Question

我想在我的 Angular 4 应用程序中使用推荐 jquery 代码，但我不知道如何在我的应用程序中使用它。到目前为止我做了什么...

我有一个这样的jquery代码

var clSlickSlider = function() {

        $('.clients').slick({
            arrows: false,
            dots: true,
            infinite: true,
            slidesToShow: 6,
            slidesToScroll: 2,
            //autoplay: true,
            pauseOnFocus: false,
            autoplaySpeed: 1000,
            responsive: [
                {
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 5
                    }
                },
                {
                    breakpoint: 1000,
                    settings: {
                        slidesToShow: 4
                    }
                },
                {
                    breakpoint: 800,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 500,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                }

            ]
        });

        $('.testimonials').slick({
            arrows: true,
            dots: false,
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1,
            adaptiveHeight: true,
            pauseOnFocus: false,
            autoplaySpeed: 1500,
            responsive: [
                {
                    breakpoint: 900,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 800,
                    settings: {
                        arrows: false,
                        dots: true
                    }
                }
            ]
        });

    };

而对应的html代码是

 < div class="row clients-testimonials" data-aos="fade-up">
 <div class="testimonials">

                    <div class="testimonials__slide">

                        <p>Qui ipsam temporibus quisquam vel. Maiores eos cumque distinctio nam accusantium ipsum. 
                        Laudantium quia consequatur molestias delectus culpa facere hic dolores aperiam. Accusantium quos qui praesentium corpori.
                        Excepturi nam cupiditate culpa doloremque deleniti repellat.</p>

                        <img src="images/avatars/user-01.jpg" alt="Author image" class="testimonials__avatar">
                        <div class="testimonials__info">
                            <span class="testimonials__name">Tim Cook</span> 
                            <span class="testimonials__pos">CEO, Apple</span>
                        </div>

                    </div>

                    <div class="testimonials__slide">

                        <p>Excepturi nam cupiditate culpa doloremque deleniti repellat. Veniam quos repellat voluptas animi adipisci.
                        Nisi eaque consequatur. Quasi voluptas eius distinctio. Atque eos maxime. Qui ipsam temporibus quisquam vel.</p>

                        <img src="images/avatars/user-05.jpg" alt="Author image" class="testimonials__avatar">
                        <div class="testimonials__info">
                            <span class="testimonials__name">Sundar Pichai</span> 
                            <span class="testimonials__pos">CEO, Google</span>
                        </div>

                    </div>

                    <div class="testimonials__slide">

                        <p>Repellat dignissimos libero. Qui sed at corrupti expedita voluptas odit. Nihil ea quia nesciunt. Ducimus aut sed ipsam.  
                        Autem eaque officia cum exercitationem sunt voluptatum accusamus. Quasi voluptas eius distinctio.</p>

                        <img src="images/avatars/user-02.jpg" alt="Author image" class="testimonials__avatar">
                        <div class="testimonials__info">
                            <span class="testimonials__name">Satya Nadella</span> 
                            <span class="testimonials__pos">CEO, Microsoft</span>
                        </div>

                    </div>

                </div><!-- end testimonials -->

            </div> <!-- end col-full -->
        </div> <!-- end client-testimonials -->

    </section> <!-- end s-clients --<div class="col-full">

现在我想将该 Jquery 代码集成到我的应用程序中，如果有人能提供一种方法来做到这一点，将会很有帮助。

Answer 1

为光滑的滑块创建共享组件并使用它。

  import {Component, Input, ElementRef, AfterContentInit} from '@angular/core';
    declare var jQuery: any;

    @Component({
        selector: 'app-slick-slider',
        template: `
            <ng-content></ng-content>
        `,
        styles: []
    })

    export class SlickSliderComponent implements AfterContentInit {
        @Input() options: any;
        $element: any;
        @Input() isLoad = false;
        defaultOptions: any = {
            dots: false,
            infinite: true,
            speed: 400,
            slidesToShow: 6,
            slidesToScroll: 6,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 4,
                        infinite: true,
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                }]
        };

        constructor(private el: ElementRef) {
        }

        ngAfterContentInit(): void {
            for (const key in this.options) {
                if (key) {
                    this.defaultOptions[key] = this.options[key];
                }
            }
            this.$element = jQuery(this.el.nativeElement).slick(this.defaultOptions);
        }
    }

HTML slickSliderOptions 是可选的。如果你想覆盖那个时候你需要通过的默认选项

   <app-slick-slider [options]="slickSliderOptions" class="slick-slider">
code here ...
</app-slick-slider>  

angular-cli

 "styles": [ "../node_modules/slick-carousel/slick/slick.scss",
        "../node_modules/slick-carousel/slick/slick-theme.scss"]

 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js"]

注意：确保您已安装 jQuery