Блог

У меня есть 2 скользкие карусели на главной странице /home

slider.component.ts

   @ViewChild('mainBannerModal') mainBannerModal: SlickCarouselComponent;
  @ViewChild('eventsModal') eventsModal: SlickCarouselComponent;

  next(modal) {
   if (modal) {
    modal.slickNext(); // when navigate to another page gives an error , even with condiition if modal
   }
  }

  startProgressbar() {
    this.resetProgressbar();
    this.percentTime = 0;
    this.tick = setInterval(this.interval.bind(this), 10);
  }

  interval() {
    this.percentTime  = 1 / (this.time   0.1);
    this.progressBarWidth = this.percentTime;
    if (this.percentTime >= 100) {
      this.next(this.mainBannerModal); // HERE I pass my exact slick modal and invoke function
      this.startProgressbar();
    }
  }

  resetProgressbar() {
    this.progressBarWidth = 0;
    clearTimeout(this.tick);
  }
  

slider.component.html

 <div *ngIf="mainSlider">
     <ngx-slick-carousel class="carousel" #mainBannerModal="slick-carousel" [config]="slideConfig">
       ... carousel 1
    </ngx-slick-carousel>
</div>
<div *ngIf="eventsSlider">    
    <ngx-slick-carousel class="carousel" #eventsModal="slick-carousel" [config]="slideConfig">
       ... carousel 2
    </ngx-slick-carousel>
</div>
  

Когда я перехожу со /home страницы (где мои скользкие карусели) на другую страницу /registration , у меня есть инфинитивные журналы ошибок

ОШИБКА TypeError: не удается прочитать свойство ‘пятно’ неопределенного

Пожалуйста, помогите

UPD 1

К вашему сведению, я импортирую слайды на главную страницу таким образом

main-page.component.html

 <section class="main">
  <app-slider mainSlider="true"></app-slider>
  <app-slider eventsSlider="true"></app-slider>
</section>
  

Кажется, в ваших фрагментах кода отсутствуют некоторые важные части, поэтому можно только догадываться…

1. Вы вызываете setInterval , но очищаете его с помощью clearTimeout . Вы должны использовать clearInterval вместо этого.

clearTimeout используется с setTimeout .

2. Вероятно, заданный вами интервал остается активным, что приводит к вызову чего-либо, когда ваш компонент уже был уничтожен маршрутизатором.

Попробуйте реализовать OnDestroy и вызвать свой метод сброса внутри ngOnDestroy :

 import { OnDestroy } from '@angular/core';

@Component(...)
export class YourComponent implements OnDestroy
{
   ...

   private clearInterval(): void
   {
      if (this.tick)
      {
          clearInterval(this.tick);
          this.tick = null;
      }
   }

   ngOnDestroy()
   {
       this.clearInterval();
   }
}
  

Когда пользователь переходит на новый маршрут, маршрутизатор уничтожит ваш компонент и вызовет ngOnDestroy , который удостоверится, что интервал очищен.