[SOLVED] Ionic navController pop with params

#21

I think the same general skeleton should work perfectly for you.

export class AuthedHttp {
  constructor(private _sink: Sink, private _http: Http) {
  }

  post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
    let allopts = this._frotzOptions(url, options);
    return this._http.post(url, body, allopts);
  }

  private _frotzOptions(urlo: string | Request, options: RequestOptionsArgs): RequestOptionsArgs {
    if (!options) {
      options = {}
    }
    if (!options.headers) {
      options.headers = new Headers();
    }
    let token = this._sink.getToken();
    // add it to options.headers
    return options;
  }
}
export class TypicalPage {
  constructor(private _ahttp: AuthedHttp) {
  }

  foo() {
    this._ahttp.post('restricted-url', body).subscribe((rsp) => {
    });
  }
}

Not a NavParam in sight.

2 Likes
#22

Cool, thanks! I’ll run some tests locally to see if I can get this integrated without using any annoying navParams.

#23

May G-d bless you man! It worked fine, you are a genius, I hope someday have the knowledge you have. Thanks a lot!

#24

Works like charming. Save my time.Thanks bro

#25

Hi, may i know how did you do it?
i assigned _params to my local variable, however it shows undefined when i use ionViewDidEnter to console the local variable.
Can you help me ?

2 Likes
#26

@aaronksaunders Thanks for solution.

Needed a slight tweak

    let _that = this;
    this.callback = function(_params) {
        return new Promise( (resolve,reject) => { 
                                    console.log('In callback:', _params);
                                    _that.credentials = _params;
                                    resolve(); 
                                                }
                            );
    }
#27

Please don’t emulate the previous post. It packs several antipatterns into a fairly small space.

#29

Great! Thank you so much.

#30

Wow, Sneaky love it!!

#31

I achieved similar functionality using Events listeners using following codes -

MainPage-

import { NavController, Events } from 'ionic-angular';
import { OtherPage } from '../other/other';

export class MainPage{
    constructor(private navCtrl: NavController,
                private events: Events) { }
    
    private pushOtherPage(){
        this.events.subscribe('custom-user-events', (paramsVar) => {
            /// Do stuff with "paramsVar"

            this.events.unsubscribe('custom-user-events'); // unsubscribe this event
        })

        this.navCtrl.push(OtherPage); // Push your "OtherPage"
    }
}

OtherPage-

export class OtherPage {
    /// Under some function
    this.navCtrl.pop().then(() => {
        /// Trigger custom event and pass data to be send back
        this.events.publish('custom-user-events', myCustomParams);
    });
}
4 Likes
#32

NavController’s pop method already returns a promise which is resolved when the transition has completed. The following approach is based on that fact and it is different from the accepted answer, but works in a similar way:

Main page

export class MainPage {
  dataFromOtherPage = null;

  callback = data => {
    this.dataFromOtherPage = data;
    console.log('data received from other page', this.dataFromOtherPage);
  };

  constructor(public navCtrl: NavController) {}

  openOtherPage() {
    this.navCtrl.push('OtherPage', {
      callback: this.callback
    });
  }
}

The other page:

export class OtherPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  goToPreviousPage() {
    this.navCtrl.pop().then(() => {
      this.navParams.get('callback')('This is some data');
    });
  }
}

8 Likes
#33

Thank you!
But for others, I must say that you need to
bind ‘this’ to the callback function.
Otherwise '‘this’ will be the other page model,
no the expected one.

#34

Store values in storage and use ionViewDidEnter in your previous page

ionViewDidEnter(){
//get params here
}

#35

thanks EmreErdogan, simple and clear example

#36

You could use the navCtrl.getPrevious() method to set the data from your Page2 and send it to Page1.

You need to use the ionWillLeave() method in Page2 and ionViewWillEnter() method in Page1 in order to achieve this.

Example

Page where we pop (Page2.ts)

public ionViewWillLeave(){
  this.navCtrl.getPrevious().data.yourVar = "yourValue"
}

Page after pop() (Page1.ts)

public ionViewWillEnter(){
  this.yourVar = this.navParams.get("yourVar");
  console.log(this.yourVar); // ==> "yourValue"
}

I saw this answer in StackOverflow and it helped me out

2 Likes
#37

I really dislike the suggestion in the previous post. It encourages overly tight coupling between pages, which makes apps hard to read, hard to test, hard to maintain. If you need to share data amongst pages, use a service provider. That way the relationship between each page and the service is clearly delineated. Poking around in framework navigation internals is a bad idea.

#38

Is there any way that can be use in ionic 4 ?