打字稿中的原生元素

Question

我正在做一个旋转木马，但它正在使用 jQuery，并且不鼓励使用 angular2 使用 jQuery，尽管使用 jQuery 不适用于动态内容我在处理静态图像和内容时。

这里是 jQuery 滑块轮播的代码：

$('#myCarousel').carousel({
    interval: 10000
})
$('.fdi-Carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

它不能处理动态内容，不知道是什么问题导致它在使用静态内容时可以工作，

我认为，jQuery 的某些功能如 next()、siblings()、clone()、appendTo 不可用。所以，我试图用 Renderer 和 ElementRef 的打字稿找到上述代码的等效代码，但我被卡住了。

这是我在其中使用滑块的组件

import { Component, OnInit, AfterContentInit,ElementRef, AfterViewInit, Renderer,ViewChild } from '@angular/core';
import { Observable,Subscription } from 'rxjs/Rx';
import {QuoteService} from 'app/services/quote.service';
import { asEnumerable } from 'linq-es2015';
declare var $: any;
export class Inclusion
{
    public Help: string;
    public EventType: string;
    public Category: string;
    public Header: string;
    public DaysVisit: string;
}
@Component({
  selector: 'inclusions',
  templateUrl: './inclusions.component.html',
  styleUrls: ['./inclusions.component.css']
})
export class InclusionsComponent implements OnInit {
  @ViewChild('myCarousel') el: ElementRef;
  public inclusions:any;  
  public inclusionList:Inclusion[];  
  public allCat:any;
  public disp_obj =[];
  public test;
  public Incl = [];
  constructor(private quoteService:QuoteService, private renderer:Renderer) {
    this.getInclusion();
   }
  ngOnInit() {
  }
  ngAfterViewInit(){
    console.log(this.el);
      this.renderer.setElementClass(
        this.el.nativeElement,'active',true,
      )
  }
  getInclusion(){
    this.quoteService.getInclusion()
    .subscribe(
      inclusions=> {
        //this.inclusions = inclusions.resultData;
        this.inclusionList = inclusions.resultData.Inclusions;        
        this.Incl = asEnumerable(this.inclusionList).GroupBy(x => x.Category,  x => x,
         (key, b) =>          
         { return { 
           Category: key ,Services: asEnumerable(b).ToArray() }
            })
        .ToArray();

        console.log(this.Incl);
      },
      response => {
       if (response.status == 404) {
          }
      }
    )
  }

}

组件html:

 <div class="inclusions_detail_carousel">
      <div class="carousel-indicators">                 
      </div>
      <!--New Carousel-->
      <div class="col-md-12">
         <div class="well">
            <div id="myCarousel" #myCarousel class="carousel fdi-Carousel slide">
               <div class="carousel-indicators">
                 <a class="left carousel-control" href="#eventCarousel" data-slide="prev"><span class="icon-prev"></span></a>
                 <a class="right carousel-control" href="#eventCarousel" data-slide="next"> <span class="icon-next"></span></a>
              </div>
              <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
               <div class="carousel-inner onebyone-carosel">
                  <div class="item active"  *ngFor="let item of Incl">
                     <div class="col-md-4">
                        <div class="inclusions_bx_detail">
                           <div class="inclusions_bx_detail_title">
                              <div class="inclusions_bx_detail_title_icon">
                                 <img src="images/inclusions_icon1.jpg" alt="">
                              </div>
                              <h3>hotel stay information</h3>
                              <span>Accomodation And Dining</span>
                           </div>
                           <div class="inclusions_detail_img">
                              <img src="images/inclusions_img1.jpg" alt="">
                           </div>
                           <div class="inclusions_detail_img_info scrollbox3">
                              <div class="inclusions_detail_img_info_in">
                                 <img src="images/inclusions_img_icon1.png" alt="">
                                 <span>2 Nights in Pattaya (Day 1, 2)</span>
                              </div>
                              <div class="inclusions_detail_img_info_in">
                                 <img src="images/inclusions_img_icon1.png" alt="">
                                 <span>2 Nights in Bangkok (Day 3, 4)</span>
                              </div>
                              <div class="inclusions_detail_img_info_in">
                                 <img src="images/inclusions_img_icon1.png" alt="">
                                 <span>4 ABFs (Day 1, 2, 3 ,4)</span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <!--New Carousel-->
</div>

有人可以帮我吗？

谢谢

Answer 1

JQuery 与 Angular 2+ 一起使用并不气馁。你可以随心所欲地做。

你所说的静态内容和动态内容是什么意思？

Answer 2

似乎 jquery 代码在 API 调用获取滑块响应之前加载，

设置timeout完成工作

setTimeout(() => {
       $('#myCarousel').carousel({
        interval: 10000
    })
    $('.fdi-Carousel .item').each(function () {
        var next = $(this).next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        if (next.next().length > 0) {
            next.next().children(':first-child').clone().appendTo($(this));
        }
        else {
            $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
        }
    });

}, 3000);

打字稿中的原生元素

Native elements in typescript

jquery

angular

typescript

renderer