hi everyone,
902/5000
I am working with slides and segments, these elements each have an event for when the segments are changed, I explain. When I change a segment through the segment element I have the event (ionChange) which I change by code the slide that I find in order to have a good navigability. In turn, in the Slide element I also have the event (ionSlideWillChange) to change the slide when I change pages and change the focus of the category.
I have the problem when I change the segment manually to change the slide and I execute by typescript this.slides.slideTo (index); to change the view slide, but this event causes the event to be activated in parallel (ionSlideWillChange) thus executing double code that I do not require.
Is there any way to make this more functional or to cancel that second event?
Then place the code in question:
<ion-header>
<ion-toolbar class="ionToolbarPrincipal">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Noticias Generales</ion-title>
</ion-toolbar>
<ion-toolbar class="ionToolbarSegment">
<ion-segment scrollable [(ngModel)]="categories">
<ion-segment-button *ngFor="let category of listaCategorias; let idx=index;" (click)="CambiarCategoria(idx)" value="{{ category.id }}" >
<ion-label class="labelTextCategoria" id="{{ category.id }}"><b>{{ category.nombre }}</b></ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content [scrollEvents]="true">
<ion-slides #slider [options]="sliderConfig" (ionSlideWillChange)="CambiarSlide()" (ionSlideTouchStart)="ValidarSlice()">
<ion-slide>
<ion-grid>
<ion-row>
<ion-col>
<ion-card class="cardsRow" color="light" *ngFor="let card of cardCat0; let idx=index;">
<ion-card-header>
<ion-card-title text-center class="textoTitulo">{{ card.titulo }}</ion-card-title>
</ion-card-header>
<ion-card-content class="cardContent">
<div *ngIf="card.imagen != ''">
<ion-img src="{{ card.imagen }}" (click)="ObtenerDatosCards(card.id)"></ion-img>
{{ card.detalle }}
</div>
<div *ngIf="card.imagen == ''">
<ion-label (click)="ObtenerDatosCards(card.id)">{{ card.detalle }}</ion-label>
</div>
<ion-row>
<ion-col col-3 no-padding>
<ion-button no-margin text-center fill="clear" style="pointer-events: none;">
<ion-icon [name]="card.favorita"></ion-icon>
</ion-button>
</ion-col>
<ion-col col-3 no-padding>
<ion-button no-margin text-center fill="clear" style="pointer-events: none;">
<ion-icon [name]="card.alarma"></ion-icon>
</ion-button>
</ion-col>
<ion-col col-3 no-padding>
<ion-button no-margin text-center fill="clear" style="pointer-events: none;">
<ion-icon [name]="card.guardada"></ion-icon>
</ion-button>
</ion-col>
<ion-col col-3 no-padding>
<ion-button no-margin float-right fill="clear" (click)="CargarBotonesOpciones(card)">
<ion-icon name="reorder"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
<ion-slide>
<ion-grid>
<ion-row>
<ion-col>
<ion-card class="cardsRow" color="light" *ngFor="let card of cardCat1; let idx=index;">
<ion-card-header>
<ion-card-title text-center class="textoTitulo">{{ card.titulo }}</ion-card-title>
</ion-card-header>
<ion-card-content class="cardContent">
<div *ngIf="card.imagen != ''">
<ion-img src="{{ card.imagen }}" (click)="ObtenerDatosCards(card.id)"></ion-img>
{{ card.detalle }}
</div>
<div *ngIf="card.imagen == ''">
<ion-label (click)="ObtenerDatosCards(card.id)">{{ card.detalle }}</ion-label>
</div>
<ion-row>
<ion-col col-3 no-padding>
<ion-button no-margin text-center fill="clear" style="pointer-events: none;">
<ion-icon [name]="card.favorita"></ion-icon>
</ion-button>
</ion-col>
<ion-col col-3 no-padding>
<ion-button no-margin text-center fill="clear" style="pointer-events: none;">
<ion-icon [name]="card.alarma"></ion-icon>
</ion-button>
</ion-col>
<ion-col col-3 no-padding>
<ion-button no-margin text-center fill="clear" style="pointer-events: none;">
<ion-icon [name]="card.guardada"></ion-icon>
</ion-button>
</ion-col>
<ion-col col-3 no-padding>
<ion-button no-margin float-right fill="clear" (click)="CargarBotonesOpciones(card)">
<ion-icon name="reorder"></ion-icon>
</ion-button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
</ion-content>
<app-footer></app-footer>
and typescript
CambiarCategoria(index)
{
if(index == "0")
{
if(this.cardCat0 != null)
{
this.slides.slideTo(index);
}
}
else if(index == "1")
{
this.slides.slideTo(index);
}
}
Any comments or help will always be well appreciated by me. Have a nice day