Ionic 4 - previous button not working

Ionic Framework ionic-v3
1

Hi,

I have been using Ionic 4 routing navigation for rotating through previous and next chapters of a book, Its working perfectly fine for Next but on previous button is not loading the content. Below is the code i am using

In HTML -

  <ion-button [routerLink]="['/ch',link.prev]" routerDirection="back" > Previous </ion-button>

<ion-button [routerLink]="['/ch',link.next]"  routerDirection="forward">Next</ion-button>

In .TS file

ngOnInit() {

 this.activatedRoute.params.subscribe((params) => {
       	  if(params.chname)
 	  {
 		this.chname=params.chname;	
 		}
console.log("In activatedRoute",this.chname);
    });  
 
console.log("out activatedRoute",this.chname);
   
 	  if(this.chname)
 	  {
 		this.fetchChNameData(this.chname);	
 		}
 
 
 }

If i tap on NEXT then it works perfectly and i can see the parameter value in this.chname in console.log in both cases “In activatedRoute” and “out acticatedRoute” and fetchChNameData function works to fetch the data.

But when i tap on Back button then i can see this.chname in console.log only in “In activateRoute” but NOT in “Out activatedRoute” resulting fetchChNameData function is not working and not fetching any data.

I don’t know why is it happening.

Can anybody help me please?

Thanks,
Zack

2

Hard to know what the issue is just from the small snippet. Can you isolate this in a demo and pot a github repo?

3

Hi,

Sorry for very delayed reply, i have not been in best of my health. Basically, what i have been trying to do is to create Previous, Next navigation system which includes url parameters for both previous and next links, i have been receiving these parameters within ActivatedRoute. parameters are accessible outside of this ActivateRoute subscribe function while accessing the next button but sometimes it’s not accessible in previous/back link. I relevantly new to ionic. I have set up a git with SRC of my code sample using default blank ionic setup.

Ionic info


   ionic (Ionic CLI)             : 4.11.0 
   Ionic Framework               : @ionic/angular 4.11.4
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : android 8.1.0
   Cordova Plugins       : not available

System:

   NodeJS : v10.16.3 
   npm    : 6.9.0
   OS     : Windows 7

Please help.

Thanks,
Zack

4

I suspect this is the key word here. Whenever you are dealing with asynchronous sources, the only place you can be certain that the external source has emitted is within a subscription to it. When you assign to properties outside that subscription, any code that accesses the information via those properties must be prepared to properly handle the case where the emission has not yet happened. Sometimes that code path doesn’t get exercised, but do not let that lull you into a false sense of security, and emphatically do not go down the rabbit hole of attempting to read tea leaves as to when the property is safe to read from outside. It won’t be consistent, despite your best efforts.

So keep that in mind, do what needs to be done in the subscription in the subscription, and make sure that the app at least behaves sanely in case the emission comes later than you plan (disabling controls that can’t yet be interacted with, for example).