我想在我的应用程序中添加jquery简单灯箱:http://dbrekalo.github.io/simpleLightbox/,我的问题是,当我编写静态代码时,它能很好地工作,图像来自链接=作品,文件夹中的图像可以工作,但是当我编写时* ngFor指令循环播放所有图像,它返回错误并且灯箱未打开,但图像在其他书签中打开。
错误:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at window.onload (fotografia:29)
静态代码有效:
<div class="imageGallery1">
<a href="demo/images/4big.jpg" title="Caption for gallery item 1"><img src="demo/images/4small.jpg" alt="Gallery image 1" /></a>
<a href="demo/images/5big.jpg" title="Caption for gallery item 2"><img src="demo/images/5small.jpg" alt="Gallery image 2" /></a>
<a href="demo/images/6big.jpg" title="Caption for gallery item 3"><img src="demo/images/6small.jpg" alt="Gallery image 3" /></a>
</div>
动态不起作用
component.html:
<div class="imageGallery1">
<a *ngFor="let image of galleryList; let i = index" [href]="image" title="Caption for gallery item {{i + 1}}"><img [src]="image" alt="Gallery image {{i + 1}}" /></a>
galleryList是一个字符串数组,具有3个位置以及不同照片的链接
component.ts:
declare var $: any;
...
ngOnInit() {
$('.imageGallery1 a').simpleLightbox():
}
...
答案 0 :(得分:0)
您可以将Ngx-Lightbox与Angular结合使用,而无需使用jQuery:- https://github.com/themyth92/ngx-lightbox/tree/feature/upgradeAngular7