时间戳

首页 > 解决方案 > 使用 Angular 和 ngu-carousel 动态生成的轮播幻灯片

angular - 使用 Angular 和 ngu-carousel 动态生成的轮播幻灯片

问题描述

我正在尝试使用ngu-carousel Angular 模块创建一个轮播，但我无法设置它，以便轮播幻灯片是从一组对象动态生成的。根据我在使用中看到的该模块的示例，必须使用容器组件的<ng-template #first>内部设置每张幻灯片，该容器组件使用[dataSource]-->接收幻灯片<ngu-carousel [dataSource]="[first, second, third]">接收幻灯片。

但是，我似乎无法弄清楚如何设置该本地引用以唯一生成，以便我可以创建带有 的幻灯片ngFor，如下所示：

<ng-template ngFor let-item [ngForOf]="items" let-i="index" #dynamicReferenceNeededHere>
   <p>{{item.title}}</p>
</ng-template>

任何帮助将不胜感激。

StackBlitz 示例（参见“静态”组件和模板）

标签： angular

解决方案

items现在，您的轮播是动态的，它从static.component.ts的数组中读取项目数；我在您的数组中添加了另一个字段，以显示在动态轮播中使用任意数量的字段的可能性；

使用您现有的 stackblitz并按照以下代码更改 2 个文件的内容：

使您的static.component.ts成为：

import { Component, AfterViewInit, ViewChild, ViewChildren, ChangeDetectorRef } from '@angular/core';
import { NguCarousel, NguCarouselConfig } from '@ngu/carousel';

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

export class StaticComponent {
  name = 'Angular';
  slideNo = 1;
  withAnim = true;
  resetAnim = true; 

  @ViewChild('myCarousel') myCarousel: NguCarousel;

  @ViewChildren('linkRef') linkRefs;

  carouselConfig: NguCarouselConfig = {
    grid: { xs: 2, sm: 2, md: 2, lg: 2, all: 0 },
    load: 3,
    interval: {timing: 4000, initialDelay: 1000},
    loop: true,
    touch: true,
    velocity: 0.2
  }

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit() {
    this.cdr.detectChanges();0
  }

  reset() {
    this.myCarousel.reset(!this.resetAnim);
  }

  moveTo(slide) {
    this.myCarousel.moveTo(slide, !this.withAnim);  
  }

  items = [
    { title: 'Slide One', state: 'small' ,subTitle:'sample sub title for 1' },
    { title: 'Slide Two', state: 'small' ,subTitle:'sample sub title for 2' },
    { title: 'Slide Three', state: 'small' ,subTitle:'sample sub title for 3' },
    { title: 'Slide Four', state: 'small' ,subTitle:'sample sub title for 4' },
    { title: 'Slide Five', state: 'small' ,subTitle:'sample sub title for 5' },
    { title: 'Slide Six', state: 'small' ,subTitle:'sample sub title for 6' }
  ];

}

使您的static.component.html成为：

<ngu-carousel #myCarousel [inputs]="carouselConfig" [dataSource]="items">
    <div *nguCarouselDef="let item;" class="item">
        <div class="tile">
     <b>{{item.title}}</b> : 
     {{item.subTitle}}
        </div>
    </div>

<!-- this is the ng-teamplate I'd like to use for the carousel slides -->
<!--
<ng-template ngFor let-item [ngForOf]="items" let-i="index" #dynamicReferenceNeededHere>
   <p>{{item.title}}</p>
</ng-template> 
-->
<!--
    <ng-template #first>
        <p>First</p>
    </ng-template>

    <ng-template #second>
        <p>Second</p>
    </ng-template>

    <ng-template #third>
        <p>Third</p>
    </ng-template>
-->

    <button NguCarouselNext class="rightRs">></button>
    <button NguCarouselPrev class="leftRs"><</button>
    <ul class="myPoint" NguCarouselPoint>
        <li *ngFor="let j of myCarousel.pointNumbers; let j = index" [class.active]="j==myCarousel.activePoint" (click)="myCarousel.moveTo(j)"></li>
    </ul>
</ngu-carousel>

推荐阅读