Question

我想在我的角度应用程序中使用此jquery函数。是否有其他不使用Jquery的方式，因为不建议这样做？


 $('multi-item-carousel.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));
      }
    });

Answer 1

正如您所说，不建议在Angular中这样做。 Angular将模板渲染到DOM中，因此不要使用ElementRef，因为这是不得已的方法，您应该在使用Renderer2渲染模板之前执行此操作：https://angular.io/api/core/Renderer2

从这里分开，您可以开始使用：

let multItemCarousel= this.renderer.selectRootElement('.multi-item-carousel');

并使用诸如appendChild()或insertBefore()的方法

Answer 2

 @ViewChild('listInner', {static : false}) CarParaentElement: ElementRef<HTMLElement>;//(carousel-inner)

  ngAfterViewInit() {

    for (let entry of this.CarParaentElement.nativeElement.children) {
    var nextSibling = entry.nextSibling;

    if(!nextSibling || nextSibling === null){
      nextSibling = this.CarParaentElement.nativeElement.children[0];
    }
    var x = nextSibling.firstChild.cloneNode(true);

    this.renderer.appendChild(entry, x);

            for (let i=0;i<2;i++) {
          nextSibling=nextSibling.nextSibling;
        if(!nextSibling || nextSibling === null){
            nextSibling = this.CarParaentElement.nativeElement.children[0];
          }
//          next.children(':first-child').clone().appendTo($(this));
      var y =   nextSibling.firstChild.cloneNode(true);

      this.renderer.appendChild(entry,y);
        }

https://stackblitz.com/edit/angular-pjetcv

如何在带有ElementRef的Angular中使用以下函数

2 个答案: