Question

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

我有像这样的 jquery代码

func blurredImage(with sourceImage: UIImage) -> UIImage {
    //  Create our blurred image
    let context = CIContext(options: nil)
    let inputImage = CIImage(cgImage: sourceImage.cgImage as! CGImage)
    //  Setting up Gaussian Blur
    var filter = CIFilter(name: "CIGaussianBlur")
    filter?.setValue(inputImage, forKey: kCIInputImageKey)
    filter?.setValue(50.0, forKey: "inputRadius")
    let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage

   /*  CIGaussianBlur has a tendency to shrink the image a little, this ensures it matches 
    *  up exactly to the bounds of our original image */

    let cgImage = context.createCGImage(result ?? CIImage(), from: inputImage.extent)
    let retVal = UIImage(cgImage: cgImage!)
    return retVal
}

和相应的 html代码是

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
                    }
                }
            ]
        });

    };

现在我想将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

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

1 个答案: