Angular , 当导航到另一个页面时，出现未定义的错误

Question

我在主页上有 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 时，我有 不定式 错误日志

ERROR TypeError: Cannot read property 'slick' of undefined

请帮忙

UPD 1

仅供参考，我通过这种方式在主页上导入幻灯片

主-page.component.html

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

Answer 1

您的代码片段似乎缺少一些重要部分，因此只能猜测...

您正在呼叫 setInterval 但使用 clearTimeout 清除它。您应该改用 clearInterval。

clearTimeout is used with setTimeout.

您设置的间隔可能处于活动状态，导致在您的组件已被路由器销毁时调用某些东西。

尝试实现 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 以确保清除间隔。

Angular , 当导航到另一个页面时，出现未定义的错误

Angular , when navigate to another page , slick of undefined error

angular

slick.js