Question

我在使用Angular 4的网站上显示了一个包含许多图像的滑块。由于滑块位于网页的一小部分，我想放置某种点击或选项，图像可以显示得更大屏幕或窗口。图像可以是可点击的，也可以在更大的窗口或对话框中打开滑块。这是我的HTML部分代码：

 <ngb-carousel>
     <ng-template ngbSlide *ngFor="let photo of array">
        <img class="img-fluid w-full" [src]="photo"   (error)="errorHandler($event)" alt="No image found">
     </ng-template>
 </ngb-carousel>

Answer 1

使用angular2-lightbox，它表示angular2，但它可以工作到5（来源：我在angular5项目中使用它）

在你的ts文件中

export class GalleryComponent implements OnInit {
    galleries: Gallery[];
    lightboxObj: any[];

    constructor(
        private staffService: PageService, 
    ) { }

    ngOnInit() {
        this.staffService.getOne('galleries').subscribe(
            galleries => {
                this.galleries = galleries;
                this.lightboxObj = this.galleries.map(gallery => {
                    return {
                        src: gallery.url,
                        caption: gallery.name
                    }
                });
            }
        );
    }

    openLightbox( index: number ) {
        this._lightboxService.open(this.lightboxObj, index);
    }
}

和html完成如下：

<div class="row galleries">
    <div class="col-lg-3 col-md-4 col-sm-6 col-12" *ngFor="let gallery of galleries; let i=index"> 
           <div (click)="openLightbox(i)" class="bg-image clickable" [style.backgroundImage]="'url(' + gallery.url + ')'"></div>
    </div>
</div>

注意click事件和索引i

使用ng-carousel bootstrap在大窗口中打开图像

1 个答案: