Swiperjs funktionieren nicht ordnungsgemäß, wenn Sie es bedingt rendern ⇐ JavaScript

[Anonymous]

In meiner Winkelanwendung habe ich 4 Swiper -Folien, die ich bedingt rendern möchte. Aber es funktioniert nicht richtig. Ich habe auch Bilder unten hinzugefügt. Aber nehmen Sie an, wenn Sie Swiper_1 auswählen, dann zeigt es 1 Folie pro Ansicht, aber laut Swiperparam sollte es 4 Folie pro Ansicht angezeigt. Die Parameter werden nicht ordnungsgemäß angewendet.

Code: Select all

import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, NgZone, QueryList, Renderer2, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';

@Component({
selector: 'app-swiper-testing',
standalone: true,
imports: [CommonModule],
templateUrl: './swiper-testing.component.html',
styleUrls: ['./swiper-testing.component.scss'],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
encapsulation: ViewEncapsulation.None,
})
export class SwiperTestingComponent {

constructor(private el: ElementRef, private cdRef: ChangeDetectorRef, private ngZone: NgZone, private renderer: Renderer2) { }

@ViewChild('swiper_1') swiper_1!: ElementRef;
@ViewChild('swiper_2') swiper_2!: ElementRef;
@ViewChild('swiper_3') swiper_3!: ElementRef;
@ViewChild('swiper_4') swiper_4!: ElementRef;

selectedCategories: string = 'all';

swiperParams = {
loop: false,
slidesPerView: 1,
spaceBetween: 24,
breakpoints: {
640: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
1200: {
slidesPerView: 4,
},
1500: {
slidesPerView: 4.5,
},
1700: {
slidesPerView: 5,
},
1900: {
slidesPerView: 5.5,
},
},
navigation: true,
};

ngAfterViewInit() {
this.swiper_1Swiper();
this.swiper_2Swiper();
this.swiper_3Swiper();
this.swiper_4Swiper();
}

categoriesSelect(value: string) {
if (this.selectedCategories === value) return;

this.selectedCategories = value;
this.cdRef.detectChanges();

// Let Angular fully update the view first
this.ngZone.runOutsideAngular(() => {
setTimeout(() => {
this.ngZone.run(() => {
if (value === 'all' || value === 'swiper_1') this.swiper_1Swiper();
if (value === 'all' || value === 'swiper_2') this.swiper_2Swiper();
if (value === 'all' || value === 'swiper_3') this.swiper_3Swiper();
if (value === 'all' || value === 'swiper_4') this.swiper_4Swiper();
});
}, 0);
});
}

swiper_1Swiper() {
if (this.swiper_1?.nativeElement) {
const swiperEl = this.swiper_1.nativeElement;
Object.assign(swiperEl, this.swiperParams );
swiperEl.initialize();
}
}

swiper_2Swiper() {
if (this.swiper_2?.nativeElement) {
const swiperEl = this.swiper_2.nativeElement;
Object.assign(swiperEl, this.swiperParams);
swiperEl.initialize();
}
}
swiper_3Swiper() {
if (this.swiper_3?.nativeElement) {
const swiperEl = this.swiper_3.nativeElement;
Object.assign(swiperEl, this.swiperParams);
swiperEl.initialize();
}
}
swiper_4Swiper() {
if (this.swiper_4?.nativeElement) {
const swiperEl = this.swiper_4.nativeElement;
Object.assign(swiperEl, this.swiperParams);
swiperEl.initialize();
}
}

}

< /code>
html -> < /p>



All
swiper
swiper 1
swiper 2
swiper 3
swiper 4


[h4]swiper_1 [/h4]







[h4]swiper_2 [/h4]






*ngIf="selectedCategories === 'all' || selectedCategories === 'swiper_3'">
[h4]swiper_3 [/h4]







[h4]swiper_4 [/h4]

All selected ->


Selected Swiper_1 ->

Ausgewählte SWIPER_2 ->
Alle erneut ausgewählt ->