Question

我想在Angular 2的路由页面中做一个图像滑块。我插入了flexslider和bootstrap轮播，但我还是没有这样做。我怎么能这样做？

我的路线页码

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { ProviderMain } from '../provider/provider';
import { ActivatedRoute } from '@angular/router';
import * as $ from 'jquery';





@Component({
    selector: 'detail',
    templateUrl: '/app/detail/detail.html',
    providers: [ProviderMain],


})

export class Detail
{
    public link: any;
    public mainData: any;
    public bookingInformation: Array<any>;
    public detail: Array<any>;
    public information: any;
    public itemImages: Array<any>;

    private NextPhotoInterval: number = 5000;
    //Looping or not
    private noLoopSlides: boolean = true;
    //Photos
    constructor(public http: Http, public routePrm: ActivatedRoute, public provide: ProviderMain)
    {
        console.log("Detail Html Başladı");
        this.routePrm.params.subscribe(params => {
            this.link = params["link"];
            this.getDetail(this.link);
        });

    }
    ngAfterViewInit() {

    }
    getDetail(link: any) {
        this.provide.getServiceDetailInformation(link).then(data => {
            this.bookingInformation = data.bookingInformation;
            this.detail = data.detail;
            this.information = data.information[0];
            this.itemImages = data.itemImages;
        });
    }



}

我的html代码是

  <div id="slider" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="assets/images/holiday-slide3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-slide4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/slide15.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-slide3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-slide4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/slide15.jpg" alt="cruise">
                        </li>
                    </ul>
                </div>
                <div id="carousel" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="assets/images/holiday-thumb3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb5.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb3.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb4.jpg" alt="cruise">
                        </li>
                        <li>
                            <img src="assets/images/holiday-thumb5.jpg" alt="cruise">
                        </li>
                    </ul>
                </div>

如果我通常使用的插件是

 $(document).ready(function () {
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 150,
            itemMargin: 5,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
        });
    });

Bu那不行。我怎么能这样做？谢谢大家。

Answer 1

注意@Liam的警告并尽可能避免这种情况。请谨慎使用......

在模板中，添加对flexslider元素的引用：

<div #slider id="slider" class="flexslider">
    <!-- ... -->
</div>
<div #carousel id="carousel" class="flexslider">
    <!-- ... -->
</div>

在组件中，您需要导入ViewChild和NgZone以在Angular之外运行jQuery。在模板视图中创建对元素的引用。然后，您将使用ngAfterViewInit方法运行插件。

import { Component, NgZone, ViewChild } from '@angular/core';
import $ from "jquery";
//...

@Component({
    selector: 'detail',
    templateUrl: '/app/detail/detail.html',
    providers: [ProviderMain]
})
export class Detail {
    @ViewChild('slider') slider;
    @ViewChild('carousel') carousel;

    $carousel: JQuery | any;
    $slider: JQuery | any;

    constructor(
        private zone: NgZone
    ) {}

    //...

    ngAfterViewInit() {
        this.zone.runOutsideAngular(() => {
            this.$carousel = $(this.carousel.nativeElement).flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 150,
                itemMargin: 5,
                asNavFor: this.slider.nativeElement
            });

            this.$slider = $(this.slider.nativeElement).flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: this.carousel.nativeElement
            });
        }
    }

    //...
}

Check out this article on Hackernoon for reference

如何在Angular 2的根页面中添加任何jquery插件？

1 个答案: