我将MY组件文件放在下面

import { Component, OnInit, Input } from '@angular/core';
import {HeadService} from '../service/head.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
head_slider: any = [];
imgslider: any = [];

  constructor( public _HeadService: HeadService ) {  }

  slides  = [  ];

slideConfig  = {'slidesToShow': 3, 'slidesToScroll': 4};

  ngOnInit() {

  this._HeadService.getDataa().subscribe(data => {
    this.head_slider = data['articles'];
   console.log(this.head_slider);
        for (let i = 0; i < data['articles'].length; i++) {

            this.slides.push({img: data['articles'][i].urlToImage});
        }
  });
}

在上面的“图像”滑块中，我使用的是ngx-slick“图像”滑块插件，单击按钮后会在此处滑动更改，我要自动增加滑块的图像。

我将html文件放在下面

<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
        <div ngxSlickItem *ngFor="let slide of slides" class="slide">
              <img src="{{ slide.img }}" alt="" width="100%">
        </div>
    </ngx-slick>

    <button (click)="addSlide()">Add</button>
    <button (click)="removeSlide()">Remove</button>
    <button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
    <button (click)="slickModal.unslick()">unslick</button>

Answer 1

如果要自动循环显示图像，可以使用timer Observable，它在指定的时间间隔内发射数字。

首先在模板中的光滑组件上添加一个名称，以便您也可以在代码中获得它。然后，模板如下所示：

<ngx-slick #slickComponent class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
    <div ngxSlickItem *ngFor="let slide of slides" class="slide">
          <img src="{{ slide.img }}" alt="" width="100%">
    </div>
</ngx-slick>

然后，您可以在标头组件中以ViewChild的形式获取该组件，并在可观察到的计时器订阅中调用该组件的slickGoTo方法。这是添加此逻辑后的标头组件外观示例。

import { Component, OnInit, Input, AfterViewInit, OnDestroy } from '@angular/core';
import { timer, Subscription } from 'rxjs';
import {HeadService} from '../service/head.service';
import { SlickComponent } from 'ngx-slick';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
head_slider: any = [];
imgslider: any = [];
@ViewChild('slickComponent') slickComponent: SlickComponent;
private timerSubscription: Subscription;

  constructor( public _HeadService: HeadService ) {  }

  slides  = [  ];

slideConfig  = {'slidesToShow': 3, 'slidesToScroll': 4};

  ngOnInit() {

  this._HeadService.getDataa().subscribe(data => {
    this.head_slider = data['articles'];
   console.log(this.head_slider);
        for (let i = 0; i < data['articles'].length; i++) {

            this.slides.push({img: data['articles'][i].urlToImage});
        }
  });

  public ngAfterViewInit() : void {
    this.timerSubscription = timer(1000, 1000).subscribe((nextNumber) => {
      this.slickComponent.slickGoTo(nextNumber % this.slides.length);
    });
  }

  public ngOnDestroy(): void {
    this.timerSubscription.unsubscribe();
  }
}

必须在ngAfterViewInit方法中启动计时器，因为该组件不可用之前。第一个计时器参数指定启动多少时间后，第二个参数指定每个生成的下一个数字的间隔。因为可观察到的计时器始终会产生递增的数字，所以我一直使用模数（除法余数）运算符来获取仅有效索引的数字。

要正确释放和停止计时器，需要在unsubscribe中进行ngOnDestroy调用，以便在销毁组件后它不会继续运行。您可以在documentation of rxjs中阅读有关正确处置Observable的更多信息。

Answer 2

最简单的方法实际上是将其添加到配置中。圆滑的传送带已经支持自动播放图像。参见官方documentation。这是ngx-slick封装的slick库的原始文档，用于Angular。因此，您需要做的就是更改slideConfig使其包含autoPlay，如下所示：

slideConfig = {"slidesToShow": 4, "slidesToScroll": 4, autoplay: true,
  autoplaySpeed: 2000};

如何在Angular中自动增加图像滑块

我将MY组件文件放在下面

我将html文件放在下面

2 个答案: