CODEWITHSUNDEEP
angularionic-frameworkionic2angular2-routing
RAHUL DEEP
RAHUL DEEP

Reputation: 655

Ionic2 navController properties not working as expected

I am trying to build an app, which has the following work flow.

  1. LoginPage
  2. HomePage
  3. Create Request page -> Present in HomePage and menu
  4. Request Success page -> when request creation is success
  5. Request List page -> Present in HomePage and menu
  6. Request detail page -> on click of request item

From login page when user have given then correct credentials i am calling a service.If it is success,i am making Homepage as the root of nav controller.

if(getLoginDetails.status == "success")
{
this.navCtrl.setRoot(HomePage);
}

but still when i used this.navCtrl.length() in HomePage constructor,its show 2.How can this happen,when i just replaced root element of navigation stack from LoginPage with homepage.As per my understanding,the count should come as 1. Also except login each page has swipeEnabled = true menu and a back button. Now suppose user go to HomePage and then createRequestPage and then used menu to go to requestListPage,now i need that when user click back button it should take user to homePage.For this my approach is that when user click through menu,i will remove all pages in navigation stack except the first one that is our root-Homepage. I tried with this way but its not working-

this.navCtrl.remove(1,this.navCtrl.length(),{}).then(
()=>{
      this.navCtrl.push(RequestListPage)
});

But this does not seems to work. Can somebody help me with this. Also some better docs for NavController of ionic2.

Upvotes: 0

Views: 421

Answers (2)

My Mai
My Mai

Reputation: 1093

if you put navCtrl in the provider that is the way:

In provider import 

import { NavController, App } from 'ionic-angular';

in export class init

private navCtrl: NavController;

in constructor

constructor(private app:App) {

   this.navCtrl = app.getActiveNav();

}

Define a function go to home page:

goToHomePage() {

    this.navCtrl.setRoot(HomePage);

}

Now can call this.navCtrl in any page you like

import { YourProvider } from "../../your-provider";


@Component({

    selector: 'page',

    templateUrl: 'page.html',

    providers: [YourProvider]

})


export class YourPage{

  constructor(private yourProvider : YourProvider) {

}

goToHome() {
    this.yourProvider.goToHomePage();
}

now you can use navCtrl

Goodluck

Upvotes: 0

Ivar Reukers
Ivar Reukers

Reputation: 7719

Do you have the selector tag set in your @Component? This is a little bug in Ionic, which causes the page to push itself onto the stack, this would explain why the length is 2 and why you have a back button.

If this is the case, removing the selector should do the trick.

And why not just switch over a boolean if the person came through the menu or not? Then just push to the HomePage if that boolean is true. Simpler and probably cleaner in code as well.

Upvotes: 0

Related Questions