Angular , 当导航到另一个页面时,出现未定义的错误
Angular , when navigate to another page , slick of undefined error
我在主页上有 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>
您的代码片段似乎缺少一些重要部分,因此只能猜测...
- 您正在呼叫
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
以确保清除间隔。
我在主页上有 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>
您的代码片段似乎缺少一些重要部分,因此只能猜测...
- 您正在呼叫
setInterval
但使用clearTimeout
清除它。 您应该改用clearInterval
。
clearTimeout
is used withsetTimeout
.
- 您设置的间隔可能处于活动状态,导致在您的组件已被路由器销毁时调用某些东西。
尝试实现 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
以确保清除间隔。