如何在Angular 4灯箱图库中使用div代替图像

Question

我有一个包含不同图像的滑块。当我们单击特定图像时，它将与其余图像的滑块一起扩展。我正在使用Angle 4灯箱图库。一切正常，但我想将图像更改为一个简单的带有内容的div。例如，如果我单击divs1，则应使用内容进行扩展。.依此类推。这里的问题是扩展内容未显示。这是下面的代码，您可以参考此在线工作演示对于图像厨房https://stackblitz.com/edit/angular-2kmvza，我对div使用相同的代码。

app.component.html

<div class="gallerize-example">

    <h2>Lightbox Example</h2>
    <div class="container">
        <div class="col-md-3" *ngFor="let item of items; index as i" 
         [lightbox]="i"
         ><span>{{item.data.thumb}}</span></div>
    </div>  
</div>
<router-outlet></router-outlet>

app.component.ts

import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
import { Gallery, GalleryItem, ImageItem, ThumbnailsPosition, ImageSize } from '@ngx-gallery/core';
import { map } from 'rxjs/operators';
import * as Hammer from "hammerjs"; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent implements OnInit{
  items: GalleryItem[];
  title = 'slider-chart';

constructor(public gallery: Gallery) {
  }

ngOnInit() {
// 1. Create gallery items
    this.items = data.map(item =>
      new ImageItem({ span: item.srcUrl, thumb: item.previewUrl })
    );

    // Load items into the lightbox
    this.basicLightboxExample();

    // Load item into different lightbox instance
    // With custom gallery config
    this.withCustomGalleryConfig();
}
basicLightboxExample() {
    this.gallery.ref().load(this.items);
  }
 withCustomGalleryConfig() {

    // 2. Get a lightbox gallery ref
    const lightboxGalleryRef = this.gallery.ref('anotherLightbox');

    // (Optional) Set custom gallery config to this lightbox
    lightboxGalleryRef.setConfig({
      imageSize: ImageSize.Cover,
      thumbPosition: ThumbnailsPosition.Top
    });

    // 3. Load the items into the lightbox
    lightboxGalleryRef.load(this.items);
  }
  }
const data = [{
        "srcUrl": "divs1",
        "previewUrl": "divs1"
    },
    {
        "srcUrl": "divs2",
        "previewUrl": "divs2"
    },
    {
        "srcUrl": "divs3",
        "previewUrl": "divs3"
    },
    {
        "srcUrl": "divs4",
        "previewUrl": "divs4"
    }
];