如何销毁“动态光廊”实例，使其引用不会出现在另一个角度组件上

如何解决如何销毁“动态光廊”实例，使其引用不会出现在另一个角度组件上

我使用 angular 6 和 laravel 5.2 作为后端。

我有两个使用 lightgallery this one 的角度组件：

• componentOne
• 组件二

在 lightgallery 中，可以选择为当前缩放的图像点击像，当我们在 componentOne 上并点击像按钮时，它会正确插入“db table”图像像的数据，但是当我们导航时到componentTwo，在图片上点击like，然后记录两个条目，一个条目属于componentOne，另一个条目属于componentTwo

简而言之，componentTwo也像数据一样记录componentOne。

我想清除 ngDestroy() 上的所有灯光库数据，以免干扰 componentTwo。

两个组件的代码是一样的。我正在共享一个组件的 lightgallery 代码。

import { Component,OnInit,AfterViewInit,ElementRef,OnDestroy } from '@angular/core';
import { environment } from '../../../../../../environments/environment';

declare var $:any;

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

export class AlbumDetailsComponent implements OnInit,OnDestroy {

 constructor() {
        
 }

  ngAfterViewInit(){ 
       // Having list of images
       let details = {type:'paid'};
       this.editAlbumFn("album_list",details);
  }

  ngOnDestroy(){
    console.log('destroy album details');    
    // Can destroy lightgallery here
  }

editAlbumFn(url,object) {
this.requestService.postMethod(url,object) 
    .subscribe(
        (data : any) => {
            if (data.success == true) {
              this.albums = data.data[0];
              this.album_details = data.data;
              console.log(this.album_details);

             // It filters our image data for the dynamic lightgallery
              this.galleryImages = this.album_details.map(item => {
                const images = {};
                images['item_id']  = item.item_id;
                images['subHtml']  = "<div class='fb-comments'></div>";

                if(item.type=='VIDEO') {
                  images['thumb']    = '/assets/img/video-icon.png';
                  images['html'] = '<video class="lg-video-object lg-html5" controls preload="none"><source src="'+item.video+'" type="video/mp4">Your browser does not support HTML5 video</video>'
                } else {
                  images['src']      = item.photo;
                  images['thumb']    = item.thumb;
                }

                return images;
              })

             // Help to initialize the lightgallery
              this.activateLightBox(this.galleryImages,this.model_id);

            } else {
                this.toast_message("Error",data.error_messages);                    
            }
        },(err : HttpErrorResponse) => {
            this.errorMessages = 'Oops! Something Went Wrong';
            this.toast_message("Error",this.errorMessages);
        }
    );
}

activateLightBox(galleryImages: any,model_id) {

    var galleryImag =  galleryImages;
    var user_id,post_id;

    setTimeout(() => {

    
        // each .item class is a bootstrap grid  
        var $commentBox = $(".item");
               
        $commentBox.on('click',function (e) {

         // Used this to destroy the prevIoUs component lightgallery data
          if($(this).data('lightgallery')) {
            console.log('destroy');            
            $(this).data('lightgallery').destroy(true);
          }

          $(this).lightgallery({
              selector: '.item',appendSubHtmlTo: ".lg-item",addClass: "fb-comments",mode: "lg-fade",thumbnail:true,animateThumb: true,showThumbByDefault: true,enableDrag: false,enableSwipe: false,dynamic: true,index: $(this).data('gallery-index'),dynamicEl: galleryImag
            });        
        });

        $commentBox.on("onAfterSlide.lg",function (event,prevIndex,index) {
          post_id = $("#post_" + index).val();
          user_id = (localStorage.getItem('userId') != '' && localStorage.getItem('userId') != null && localStorage.getItem('userId') != undefined) ? localStorage.getItem('userId') : '';
          
          if (!$(".lg-outer .lg-item").eq(index).attr("data-fb")) {
            try {
              $(".lg-outer .lg-item").eq(index).attr("data-fb","loaded");

              $.get(environment.apiUrl + 'comments/' + post_id + '/album/' + model_id,{user_type:'MODEL'},function(data){
                $('.lg-loaded .fb-comments').html('');
                $('.lg-loaded .fb-comments').html(data);
                
                
                  $(".lg-outer.fb-comments .fb-comments").css('background','#fff no-repeat scroll center center');
                
              });
              // FB.XFBML.parse();
             
            } catch (err) {
              $(window).on("fbAsyncInit",function () {
                $(".lg-outer .lg-item").eq(index).attr("data-fb","loaded");
                // FB.XFBML.parse();
                console.log('catch block');
              });
            }
          }
        });
    },3000);

      
      $('body').on('click','.s_likeIconFI',function(){

            console.log("component name");

            $.ajax({
            type:'POST',url: environment.apiUrl + 'postLike/' + post_id + '/album',data:'user_id='+user_id+'&user_type=MODEL',success:function(data) {
                $('div.lg-current .commentLikeDetails').html('');
              $('div.lg-current .commentLikeDetails').html(data.text);
              $('.likeValue').html('');
              $('.likeValue').html(data.like);
              $('.s_likeIconFI').hide();
              $('.showLikes').css("display","block");
            }
          })
      });

}

请帮忙解决这个问题。 谢谢。