I want to set the button back to my child's page, I am using the pop function but it is not working.
I am using this code
import { IonicPage, NavController,} from 'ionic-angular';
constructor(public navCtrl: NavController, ) {
this.contactArray=JSON.stringify(this.navParams.get("contactArray"));
if(!this.contactArray || this.contactArray == ''){
this.navCtrl.pop();
}else{
this.loadContactDetails();
}
}
I am getting this
Error: Uncaught (in promise): navigation stack needs at least one root page
at c (polyfills.js:3)
Please help
Thanks
Related
good morning. Does anyone know the import of the NavController? I am looking at the docs of Ionic 4 docs and it says there is a method of getPrevious() however when I do:
import { NavController } from ‘#Ionic/angular’;
contructor (private navCtrl: NavController){}
private func(): void{
this.navCtrl.getPrevious();
}
I get an error saying property getPrevious does not exist on type NavController however in the docs it says that it exists. anyone aware of the proper import since it isn't documented?
previously you were able to do this with Ionic 2-3 but not Ionic 4.
side note* method last() doesn't exist either.
What do you want to do? If you want to go back, than you could use the ion-back-button.
<ion-buttons slot="start">
<ion-back-button color="light"></ion-back-button>
</ion-buttons>
Also you can use the NavController like this to get forward:
constructor(private navCtrl: NavController) { }
GotoImpressum() {
this.navCtrl.navigateForward('impressum');
}
I have a problem where when I call this.viewCtrl.dismiss(); and this.navCtrl.push(HomePage); in my function, the tabs at the bottom of the page disappear
So I have 3 pages/modal:
page1: home page, page2: modal, page3: second page
I navigate from my home page to the modal which has two actions(accept or reject)
If the user accepts then go to the second page, if the use rejects then go back to the home page. When the user accepts everything works as expected however if the user rejects then the app hides the tabs at the bottom of the page
My code for the reject button navigation is as follows
Modal page
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
Second page
calling modal in constructor
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController, public storage: Storage) {
let myModal = this.modalCtrl.create(modal);
myModal.present();
}
My TabsPage is default as per Ionics Tabs Layout App
You don't need to push the homepage from the modal since, you said, you are going back to homepage.
Change in modal.ts
gotoHome(){
this.viewCtrl.dismiss();
this.navCtrl.push(HomePage);
}
to
accepted: boolean;
....
accept(){
this.accepted = true;
this.dismiss();
}
reject(){
this.accepted = false;
this.dismiss();
}
dismiss(){
this.viewCtrl.dismiss(this.accepted);
}
Call the accept() when accepted and reject() when rejected
Handle your actions after dismissing view by
let myModal = this.modalCtrl.create(modal);
myModal.onDidDismiss( accepted => {
// your actions here
console.log(accepted);
if(accepted){
this.navCtrl.push(SecondPage);
}
});
myModal.present();
I created an example here on stackblitz
My Ionic application first loads LoginComponent and when user successfully logs in, loads the main TabsComponent view which allows to switch between corresponding child views.
I am trying to make it load standalone LoginComponent without tabbed interface, and that is not working (once switched to TabsComponent, I cannot navigate away from tabbed interface).
I've tried following commands from under one of TabsComponent child views:
this.navCtrl.push(LoginComponent); // Loads as a child view
this.navCtrl.setRoot(LoginComponent); // Loads as a child view
this.navCtrl.popAll(); // Error: navigation stack needs at least one root page
this.navCtrl.popTo(LoginComponent); // Error: navigation stack needs at least one root page
I've went through Ionic documentation many times but I haven't found an answer to this question. What am I missing?
I've solved this by injecting TabsComponent into it's child component, and then calling this.navCtrl.setRoot(LoginComponent); in a function inside TabsComponent:
// Child class of TabsComponent (loaded via tab click)
export class SettingsComponent {
constructor(#Inject(forwardRef(() => TabsComponent)) private tabsComponent: TabsComponent) {
}
logOut(): void {
this.tabsComponent.switchToLoginPage():
}
}
And switchToLoginPage on TabsComponent:
import {Component, forwardRef, Inject} from '#angular/core';
// ...
export class TabsComponent {
constructor(private navCtrl: NavController) {
}
switchToLoginPage(): void {
this.navCtrl.setRoot(LoginComponent);
}
}
Based on this example: How do I inject a parent component into a child component?
If there is a better way I'd love to know about, otherwise hope this solution would help anyone.
In my app I have 3 tabs. In the first tab there is a list that pushes to another page (inside the same tab, so the tabs remain at the bottom). When I switch to another tab, and I go back then to the first tab I am still at that subpage.
Is there a way to go always to the root. The problem is that inside the child-page I have also links, so the solution on Ionic 2 - How do I get back to the start page of a given tab did not work for me, as he redirects me also to the root when I click open a new page in the child.
Any other solutions?
I'm not sure if this would be the best way to fix that, but it should work. Suppose this is the page that contains all the tabs:
<ion-tabs>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(0)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(1)" tabTitle="First tab"></ion-tab>
<ion-tab [root]="chatRoot" (ionSelect)="onSelected(2)" tabTitle="First tab"></ion-tab>
</ion-tabs>
And in the component code:
import { Events } from 'ionic-angular';
// ...
constructor(public events: Events) {}
public onSelected(index: number): void {
if(index) this.events.publish('TabSelected');
}
So basically, we're publishing an event when the user selects any tab other than the first tab (index equal to 0).
The in the FirstTab, we can subscribe to that event, and use this.navCtrl.popToRoot() to close the opened pages inside of that tab:
// FirstTabCode
import { NavController, Events } from 'ionic-angular';
// ...
constructor(public navCtrl: NavController, public events: Events) {
this.events.subscribe('TabSelected', () => { this.navCtrl.popToRoot(); });
}
ngOnDestroy() {
this.events.unsubscribe('TabSelected');
}
I am trying various solutions from Google but all of them seems to be for Ionic 1 and other versions of Ionic and Angular.
HTML
<button class="edit" (click)="goBackToEnhancementPage();">Edit</button>
On button click I want to goto to the previous state in the history
TypeScript
This is the current state
export class BookingConfirmationPage {
//Some properties
constructor(public navCtrl: NavController, public navParams: NavParams ) {
//Some codes
}
goBackToEnhancementPage(){
canGoBack();
}
}
Previous State
export class BookingEnhancementPage {
//Some code
constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController, private formBuilder: FormBuilder ) {
//This is previous state
}
}
This doesn't work. Please advise what am I doing wrong?
I'm guessing from your question you are trying to use navController to go back to your previous state, aka "back" function.
The way ionic navigation works is like a stack, new pages will be pushed to the top of the stack via "push" via pages will be removed from the top of the stack via "pop"
To go back to your previous state, u can use :
this.navCtrl.pop();
But before that make sure you have push your previous page into navController or you have setRoot your "BookingConfirmationPage" page.
You might want to read up on : https://ionicframework.com/docs/v2/api/navigation/NavController/
If you want your previous details in BookingEnhancementPage to be filled with your user's previously entered data, you might want to use a combination of localstorage and onPageBeforeEnter/onPageWillEnter to populate the fields.