错误：ViewDestroyedError：尝试使用已销毁的视图：detectChanges

Question

screenshot of error

我创建了一个分割视图，该视图有几个按钮，每个按钮的功能是显示该按钮的具体布局，一个基本的例子是地图按钮，右边是地图，详细按钮显示了右边的细节，当我按下按钮时，我向视图添加信息并且它不刷新。 接下来，当我进行交互时，我得到图像中显示的错误，有时会发生在我创建的细节组件中。

import {
  AfterContentChecked, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnChanges, OnInit,
  SimpleChanges
} from '@angular/core';
import {NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation} from 'ngx-gallery';
import {isNullOrUndefined} from 'util';
import { EventItemButtonsService } from '../../../shared/components/event-item-buttons/event-item-buttons.service';
import {IViewItem} from "../../interfaces/view-item";
import {ResourcesService} from "../../../../services/resources.service";
import {select} from "@angular-redux/store";


@Component({
  selector: 'app-detail-view-property',
  templateUrl: './detail-view-property.component.html',
  styleUrls: ['./detail-view-property.component.css'],
  //changeDetection: ChangeDetectionStrategy.OnPush
})
export class DetailViewPropertyComponent extends IViewItem  implements OnInit {

  @select(['menuInterface','splitStatus']) splitStatus$;
  @select(['viewInterface','property']) property$;


  optionsDetailsView: any;
  dataEvent: any;

  // gallery
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

  constructor(private _eventItemButtonsService: EventItemButtonsService,
              private _resourcesService: ResourcesService,
              public _changeDetectorRef: ChangeDetectorRef
  ) {
    super();
  }

  ngOnInit() {
    // get gallery options
    this.galleryOptions = [
      {
        width: '100%',
        height: '500px',
        imagePercent: 100,
        thumbnailsColumns: 4,
        thumbnailsMargin: 5,
        thumbnailMargin: 5,
        imageSwipe: true,
        thumbnailsSwipe: true,
        imageAnimation: NgxGalleryAnimation.Slide
      },
      // max-width 800
      {
        breakpoint: 800,
        width: '100%',
        height: '500px',
        imagePercent: 80,
        thumbnailsColumns: 2,
        thumbnailsPercent: 20,
        thumbnailsMargin: 5,
        thumbnailMargin: 5,
        imageSwipe: true,
        thumbnailsSwipe: true,
        preview: true
      },
      // max-width 400
      {
        breakpoint: 400,
        imageSwipe: true,
        thumbnailsSwipe: true,
        thumbnails: false,
        preview: true
      }
    ];
    this.dataEvent = this.rowData['Properties'][0];

    this.onLoadImagesSlider(null);

    this.property$.subscribe((data) => {
      // if split active focus element
      console.log('-.-*',data);
      /*if (data !==  undefined) {
        // if is event button mapview
        this.dataEvent = data;
        this.onLoadImagesSlider(null, true);
      }*/
    });

    this._changeDetectorRef.detectChanges();


  }

  /**
   * on load request images the slider in details Views
   * @param data
   */
  onLoadImagesSlider(data?, active?) {
    // var clear
    this.galleryImages = [];

    this._resourcesService.getResourceMedia(this.dataEvent.ListingID).subscribe((res) => {
      this.processImage(res);
    });

  }

  /**
   * proccess image Slider
   * @param res
   */
  public  processImage = (res) => {
    // if medias exists
    if (res && res.length > 0) {

      for (let i = 0; i < res.length; i++) {

        if (res[i]['MediaURL'] !== '' || !isNullOrUndefined(res[i]['MediaURL'])) {
          // add image the object gallery
          this.galleryImages.push(
            {
              small: res[i]['MediaURL'],
              medium: res[i]['MediaURL'],
              big: res[i]['MediaURL']
            }
          );
        }
      }
    } else {
      // gallery default if not images
      this.galleryImages.push(
        {
          small: 'assets/images/grey.jpg',
          medium: 'assets/images/grey.jpg',
          big: 'assets/images/grey.jpg'
        }
      );
    }
    this._changeDetectorRef.detectChanges();
  };

}