Navigation Angular 2 page-router-outlet with animation Nativescript app


#1

Hi,

I have my app with a detail page like this:

/noticias
/noticias/:id

When I pass from /noticias to /noticias/:id there is a nice default transition, but when I swipe to the next /noticias/:id only changes the value of the components but there is no transition.

I have read and I know that when i use the page-router-outlet the component get a cache value and like I still calling this component it is not rendering again and I am only changing the values that I send.

I want to make a transition between this different values, can anyone help me ?

I also tried the page transition but it still with no results.

this.routerExtension.navigate([“noticia/”+this.current],{
animated:true,
transition: {
name: “slide”,
duration: 200,
curve: “spring”
}
});

Thanks !


#2

you can use in the html i.e. => [nsRouterLink]="[’/noticia’, this.current]"

or in the code i.e. => this.routerExt.navigate(["/noticia", id]);

after your transition … i.e

this.routerExtensions.navigate(["/noticia", id], {
transition: {
name: “flip”,
duration: 2000,
curve: “linear”
}
});


#3

Hi, thanks for your time.

I tried what you suggest.

This is my routing configuration.

export const routes = [
{ path: “”, component: NoticiasComponent },
{ path: “webcam”, component: WebcamComponent },
{ path: “noticia/:current”, component: SingleNoticiaComponent}
];

When user swipe on the page I make this, depending of the swipe direction the current value decrement or increase.

this.routerExtension.navigate([“noticia”,this.current],{
transition: {
name: “flip”,
duration: 200,
curve: “spring”
}
});

The page transition only do when the component render at the first time, while the component is already render, it only changes the values that i send.

I made a gif of the result. You can see on the next link https://drive.google.com/open?id=0B2oa3frtO834MWp2ZUV0TEc4Z28

Thank you again.


#4

Of course, I suppose it’s because you change IDs in reality, nothing else


#5

What is the way to solve this problem?
I have the same problem.

Thanks.


#6

@heracles007 I solved this problem using setTimeout and angular transitions. Take a look, at the bottom: https://github.com/ivanpadavan/nativescript-pools/blob/master/app/views/first/question/question.component.ts