javascript - 将 Ngu Carousel 与 Angular 4 一起使用时出错

Question

我尝试在 Angular 4 中使用此轮播 ( https://github.com/sheikalthaf/ngu-carousel )，但我不断收到此错误。

在应用程序模块和组件中完成所有导入后，我已将模板中的代码简化为这样，但错误仍然没有消失。有什么想法吗？

<ngu-carousel [inputs]="carouselOne" (carouselLoad)="myfunc($event)">
    <ngu-item NguCarouselItem>
      <div>--1--</div>
    </ngu-item>
    <ngu-item NguCarouselItem>
      <div>--2--</div>
    </ngu-item>
</ngu-carousel>

下面是组件中的代码:

import { Component, OnInit } from '@angular/core';
import { NguCarousel, NguCarouselStore } from '@ngu/carousel';
import { Http } from '@angular/http';
import { FormGroup, FormBuilder } from '@angular/forms'

@Component({
  selector: 'app-new-squad',
  templateUrl: './new-squad.component.html',
  styleUrls: ['./new-squad.component.css']
})

export class NewSquadComponent implements OnInit {

  public carouselOne: NguCarousel;
  public positions: Array<string> = [];
  public players: Array<string> = [];
  private form: FormGroup;

  ngOnInit() {
    console.log("here.........");
    this.carouselOne = {
      grid: {xs: 1, sm: 1, md: 1, lg: 1, all: 0},
      slide: 1,
      speed: 400,
      interval: 4000,
      point: {
        visible: true
      },
      load: 2,
      touch: true,
      loop: true,
      custom: 'banner'
    }
  }

 onmoveFn(data: NguCarouselStore) {
    console.log(data);
  }

  public myfunc(event: Event) {
     // carouselLoad will trigger this funnction when your load value reaches
     // it is helps to load the data by parts to increase the performance of the app
     // must use feature to all carousel
  }

  public saveSquad(f) {
    console.log(f.value);
    this.http.post('http://localhost:8080/squads', f.value)
    .subscribe(response => {
      console.log(response);
    })
  }

}

Answer 1

尝试添加这两个按钮，

<button NguCarouselPrev class='leftRs'>&lt;</button>
<button NguCarouselNext class='rightRs'>&gt;</button>

查看 ngu-carousel.component.ts 的源代码ngOnInit() 中有多个对 nativeElement 的引用。我想说以下最有可能是问题的原因

• this.rightBtn = this.next.nativeElement;
• this.leftBtn = this.prev.nativeElement;

其中 this.next 和 this.prev 设置为

@ContentChild(NguCarouselNextDirective, { read: ElementRef })
private next: ElementRef;
@ContentChild(NguCarouselPrevDirective, { read: ElementRef })
private prev: ElementRef;