自定义Ng-Bootstrap轮播，显示图像和描述字段

Question

我正在尝试自定义Angular Bootstrap Carousel！ 我已经能够更改布局并进行一些设计，以使我在图像的右侧和左侧的两列中各有两列，并在两边各带有一些自定义箭头。

我正在尝试实现两件事： 首先 ，还有另一种（更有效的方法）列出图像的方法吗？ 目前我的gallery.ts上有要显示的图像列表，目前还可以，但是会有很多图像，所以我想知道是否有办法将其放在单独的文件中并从中提取信息？

以下是我的gallery.ts ：

 import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-gallery', templateUrl: './gallery.component.html', styleUrls: ['./gallery.component.scss'], encapsulation: ViewEncapsulation.None, providers: [NgbCarouselConfig] }) export class GalleryComponent implements OnInit { images = [ //"assets/images/1.jpg", "assets/images/12.jpg", "assets/images/18.jpg", "assets/images/15.jpg", "assets/images/11.jpg", "assets/images/13.jpg", "assets/images/7.jpg", "assets/images/16.jpg" ]; constructor(config: NgbCarouselConfig) { // customize default values of carousels used by this component tree config.interval = 10000; config.wrap = false; config.keyboard = true; config.pauseOnHover = false; } ngOnInit() {} } 

其次 ，我需要与图像一起动态更改左列上的文本。 对于每张幻灯片，都应显示日期和简短说明。 有任何想法吗？

以下是我的gallery.html ：

 <ngb-carousel *ngIf="images"> <ng-template ngbSlide *ngFor="let img of images; index as i"> <div class="gallery_container"> <div class="gallery_img"> <figure> <img [src]="img" alt="Random first slide"> </figure> </div> <div class="gallery_description"> <div class="description_date"> August 20th 2016 <!-- To be displayed dynamically with every with slide {{ img_date ?? }} --> </div> <div class="description_text"> <!-- To be displayed dynamically with every with slide {{ img_description ?? }} --> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien velit, aliquet eget commodo nec, auctor a sapien. Nam eu neque vulputate diam rhoncus faucibus. Curabitur quis varius libero. Lorem. </div> </div> </div> </ng-template> </ngb-carousel> 

Answer 1

您问题的2点：

• 我想知道是否有办法将其放在单独的文件中并从中提取信息？

  • 是的，您可以在服务器上的json文件中保存此信息，或者最好在某处的数据库中保存； 在我的示例中，我将文件放在json文件中。

• 我需要与图像一起动态更改左列上的文本。 每张幻灯片应显示日期和简短说明

  • 您可以拥有一个对象而不是图像数组，这里您可以拥有前端实际需要的任何数量的字段

相关的JSON文件：

{ "imgArray": [
{"img": "https://picsum.photos/id/501/900/500", "heading" :"first", "description":"first heading's description"},
{"img": "https://picsum.photos/id/502/900/500", "heading" :"h2", "description":"second heading's description"},
{"img": "https://picsum.photos/id/503/900/500", "heading" :"h3", "description":"third heading's description"},
{"img": "https://picsum.photos/id/504/900/500", "heading" :"h4", "description":"fourth heading's description"},
{"img": "https://picsum.photos/id/505/900/500", "heading" :"h5", "description":"fifth heading's description"},
{"img": "https://picsum.photos/id/506/900/500", "heading" :"h6", "description":"sixth heading's description"},
{"img": "https://picsum.photos/id/507/900/500", "heading" :"h7", "description":"seventh heading's description"}
]
}

相关的HTML ：

<ngb-carousel *ngIf="images">
    <ng-template ngbSlide *ngFor="let slide of images; index as i">
        <div class='row'>
            <div class='col-lg-6 col-md-6 col-sm-6 col-6 '>
                <div class="description_date">
                    <h1>{{slide.heading}}</h1>
                </div>
                <div class="description_text">
                    {{slide.description}}
                </div>
            </div>
            <div class='col-lg-6 col-md-6 col-sm-6 col-6'>
                <div class="gallery_img">
                    <figure>
                        <img [src]="slide.img" alt="Random first slide">
          </figure>
        </div>
      </div>
    </div>
    </ng-template>
</ngb-carousel>

相关TS ：

import { Component } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
import * as dataJSON from './data.json';

@Component({
  selector: 'ngbd-carousel-config',
  templateUrl: './carousel-config.html',
  providers: [NgbCarouselConfig]  // add NgbCarouselConfig to the component providers
  ,styles: [` 
  .img-fluid{ min-width:100%}
  .row{background:lightgray;}
  .description_date, .description_text { padding:5%; }
  `]
})
export class NgbdCarouselConfig {
  images:any[] = []
  readJSON = dataJSON;

    constructor(config: NgbCarouselConfig) {
        // customize default values of carousels used by this component tree
        config.interval = 10000;
        config.wrap = false;
        config.keyboard = true;
        config.pauseOnHover = false;

        this.images = this.readJSON.default.imgArray;
    }
}

在这里工作stackblitz