Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: IonSlides call ionSlidesDidLoad twice #20732

Closed
bimarc opened this issue Mar 10, 2020 · 7 comments
Closed

bug: IonSlides call ionSlidesDidLoad twice #20732

bimarc opened this issue Mar 10, 2020 · 7 comments
Labels
triage

Comments

@bimarc
Copy link

bimarc commented Mar 10, 2020

In my ionic-angular project i have a bug with "ion-slides",
i have an "ion-slides" inside a component that is loaded dynamically by angular router.
First time that the page and component are loaded, "ion-slides" calls "ionSlidesDidLoad" once.
When i change route and then i return to "ion-slides" route, after "ngOnInit", "ionSlidesDidLoad" is called twice, if i repeat the route change this event is called ever twice.

Ionic version:
[x] 5.0.0
Angular version:
[x] 9.0.5
Current behavior:
On "ionSlidesDidLoad" i call "lockSwipes" function, first time i load the page it works,
after routing if i try to slide next or prev slide i can.

Expected behavior:
I expect when "ion-slides" is loaded the "ionSlidesDidLoad" event is called once ever.

Related code:

<html>
    ...
        <ion-slides #mySlides (ionSlidesDidLoad)="myFunction(mySlides)">...</ion-slides>
    ...
</html>

<script>
    ....
    myFunction(slides) {
        slides.lockSwipes(true);
    }
    ....
</script>

Other information:

Ionic info:

Ionic:
    Ionic CLI: 6.2.0 (..\..\AppData\Roaming\npm\node_modules\@ionic\cli)
    Ionic Framework: @ionic/angular 5.0.4
    @angular-devkit/build-angular : 0.900.5
    @angular-devkit/schematics: 8.3.25
    @angular/cli: 9.0.5
    @ionic/angular-toolkit: 2.2.0

Capacitor:
    Capacitor CLI   : 1.5.1
    @capacitor/core : 1.5.1

Utility:
    cordova-res : not installed
    native-run  : 0.3.0

System:
    NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
    npm    : 6.13.7
    OS     : Windows 10
@ionitron-bot ionitron-bot bot added the triage label Mar 10, 2020
@liamdebeasi
Copy link
Contributor

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Mar 10, 2020
@ionitron-bot ionitron-bot bot removed the triage label Mar 10, 2020
@bimarc
Copy link
Author

bimarc commented Mar 10, 2020

No I can't..
i can give you an example here.

  • app-routing.module.ts
const routes: Routes = [
	{ path: "", pathMatch: "full", component: AppComponent },
	{ path: "signup", pathMatch: "full", component: SignupComponent }
];
@NgModule({
	imports: [RouterModule.forRoot(routes)],
	exports: [RouterModule],
})
export class AppRoutingModule { }
  • app.module.ts
@NgModule({
	imports: [ CommonModule, IonicModule, AppRoutingModule],
	declarations: [ SignupComponent, AppComponent],
	schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
  • app.component.ts
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class App implements OnInit {
	signupRoute = "/signup";
	constructor() {	}
	ngOnInit() { }
}
  • app.component.html
<ion-router-link color="primary" routerDirection="root" [routerLink]="signupRoute">Sign up</ion-router-link>
  • signup.component.html
<ion-header>
    <ion-button routerLink="" routerDirection="back">
        <ion-icon slot="icon-only" name="home-outline"></ion-icon>
    </ion-button>
</ion-header>
<ion-content>
	<ion-slides #signupSlides (ionSlidesDidLoad)="slidesIsLoaded(signupSlides)" 
 [options]="slideOpts">
		<ion-slide>S1</ion-slide>
		<ion-slide>S2</ion-slide>
		<ion-slide>S3</ion-slide>
		<ion-slide>S4</ion-slide>
	</ion-slides>
</ion-content>
  • signup.component.ts
@Component({
	selector: "app-signup",
	templateUrl: "./signup.component.html",
	styleUrls: ["./signup.component.scss"],
})
export class SignupComponent implements OnInit {
        slideOpts = { initialSlide: 0 };
        constructor() { }
	ngOnInit() { }
	slidesIsLoaded = (slides: IonSlides) => {
		slides.lockSwipes(true);
	}
}

tell me if it's enough.

To reproduce this issue you must go or start in "signup" route, the swipes is locked.
If you go back to with the button of signup component and return to signup route, the swipes is unlocked...

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Mar 10, 2020
@bimarc
Copy link
Author

bimarc commented Mar 10, 2020

From the second time the "slidesIsLoaded" function is called twice

@liamdebeasi
Copy link
Contributor

Thanks for the follow up. I am going to close this as a duplicate of #20356.

@bimarc
Copy link
Author

bimarc commented Mar 10, 2020

Tks a lot!!

@bimarc
Copy link
Author

bimarc commented Mar 10, 2020

Adding ngIf to ion-slides and set it to true on "ngAfterViewInit" function, it works!!

In the future release this "bug" will be solved or this workaround is the only way?

@ionitron-bot
Copy link

ionitron-bot bot commented Apr 9, 2020

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Apr 9, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liamdebeasi @bimarc