I'm using a ionic stencil starter pwa with ionic router.
I'm in a page and I need to push again that same page but with a different prop, so the page will be loaded from the start with the new prop and re-render.
I'm using
const navCtrl: HTMLIonRouterElement = await(this.nav as any).componentOnReady();
navCtrl.push("/pagename/" + prop + "/", "root");
if I'm in a different page, my push works correctly. the problem is when I'm in the same page, nothing happens.
Why this happens? there Is a way to make it works?
Related
I am using ionic deeplinks. I have a service where I initialize the deeplink function like:
initDeepLink(nav: Nav) {
this.deeplinks.routeWithNavController(nav, {
'/page1/ PageComponent1,
})
}...
I call this function in my main app.component.ts , inside onAllReady() function, from the service with:
this.calldeepLinkServ.initDeepLink(this.nav);
where this.nav is of type:
#ViewChild(Nav) nav: Nav;
declared in app.component.ts
When I visit a deeplink on my device, it works fine and goes to the given page (PageComponent1), but there is always a blank page before it and then the transition sort of jumps and push the deeplink page.
It never push (slide from right) the new page in the top of the current one opened in my app. I was trying to put the #ViewChild(Nav) nav: Nav inside the deeplink service rather the app.component.ts, but it acts the same.
I also tried to see if there is a method to disable the native page push in this.deeplinks.routeWithNavController() but it does not have any properties like that (like animate: false for example which is available for NavController).
So I am really not sure how to prevent this bad navigation experience with deeplinks i am sure that this is not a typical transition for ionic deeplinks, it looks bad for UI.
So I've sorted this one out, instead:
this.deeplinks.routeWithNavController
I am using:
this.deeplinks.route
and than i check what is passed on inside the match.$link. So depending on the query send through like
if (match.$link['path'].indexOf('/page1/') !== -1) {...}
I call the nav push, with animate:false and it does not uses the default nav push animation.
How do I implement Ionic 4/Angular navigation in such a way that the user CANNOT navigate backwards though their entire experience (screens) on the application?
I've ported my Ionic 2 application to Ionic 4, and feel like I've lost some critical navigation functionality.
Specifically: as a user moves forward in the application, and bounces around the different areas of my application, they are now able use the Android back button to navigate backwards through the FULL HISTORY of their previous screes. Whereas previously Ionic would STOP them moving backwards once the user hit a root page.
For example, a user would navigate from the main Welcome Page, then to the main Products page, then to Product Details page, then to the main Orders page, and then Order Details page. Then, if they start to use the Android back button, they're allowed to navigate through the entire history of screens, all the way back to the Welcome Page.
Previously, they would be force stopped at the last root/main page (e.g. the Orders page).
I don't think I had to use any application specific logic to dynamically disable the Android back on the main pages. I think the previous versions of the Ionic framework was smart enough to stop going backwards too far.
How do I implement Ionic 4/Angular navigation in such a way that the user CANNOT navigate backwards though their entire experience (screens) on the application?
I understand that ionic 4 uses angular's routing.
I am NOT asking to disable the Android back button.
This is a much simpler solution that has been working for me. Essentially you just have to tell ionic/angular when you are about to navigate to a root page and then it will stop the back button taking you past it.
import { Router } from '#angular/router';
import { NavController } from '#ionic/angular';
...
constructor(private navCtrl: NavController, private router: Router) { }
...
this.navCtrl.setDirection('root');
this.router.navigateByUrl('/new-root-page');
In ionic v4 this seems to work fine:
in app.component.ts inside initializeApp() function add the following:
initializeApp() {
this.platform.ready().then(() => {
this.platform.backButton.subscribeWithPriority(9999, () => {
document.addEventListener('backbutton', function (event) {
event.preventDefault();
event.stopPropagation();
console.log('hello');
}, false);
});
// here put instructions for splashScreen, statusBar, etc.
});
}
I am creating an App with Ionic2 and the requirement is -
- the app when first loaded will show a Log In page and when logged in
- will have a Side-Menu enabled pages
The starter project shows that the Side Menu as the root of the app and loads first before any other page is open - then it loads the other related pages.
How can I build an app that Loads Log In page first and then set the Side Menu as the main navigation and never shows up the Log In screen??
I did this with ionic 1 but not being able to figure out with ionic2
Please help.
One solution would be to disable menu on Login screen and then to enable it after login.
You can disable menu by injecting MenuController and then use:
import {NavController, MenuController} from 'ionic-angular';
ionViewDidEnter() {
//to disable menu, or
this.menu.enable(false);
}
ionViewWillLeave() {
// to enable menu.
this.menu.enable(true);
}
#Digital IQ, you have to set your login page as the rootPage in your existing app.ts file and use MenuController in login page to make menu enable onPageDidLeave.
The example for this is available in ionic conference app where they have tutorial page before getting in to the actual application. Refer this for menu control and this (line 50) to set the initial page.
The above problem must have occurred because the user had surely logged in, but the changes i.e. setting it as the current user didn't take place in side menu page.
For that you can use Events API
Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
For reference, go through the following answer-
Ionic 3 refresh side menu after login
kind Attn [vahid najafi & Aish123]
I tried something more easy and I found it working.
I set the LogIn page as the root when the app first loaded - and I removed 'menuToggle' button from this template.
Then I imported the Component I want to redirect on Log in
I created a singIn function in LogInPage class as follows:
signIn (){
let navRef = this.app.getComponent('nav');
navRef.setRoot(HelloIonicPage);
}
and it worked like a charm
I am new to ionic framework
After i login to the app, i am redirecting to instance page.
In the instance page, i have a nav-bar enabled.
But i see nav-back button enabled and on refresh , i get back the nav-bar.
I tried adding
1 hide-nav-bar = false in instance page (no use)
2 hide-back-button= true in instane page (no use)
3 In the login controller, i tried adding
$ionicHistory.nextViewOptions({
disableBack: true
});
before i have
$state.go('instance'); (no use)
But when i refresh, from then on, it works fine.
Can someone help on this
You can use $ionicNavBarDelegate
In your controller
.controller('YourCtrl', function($ionicNavBarDelegate) {
$ionicNavBarDelegate.showBackButton(false);
})
I have this flow in my ionic app... login.html page(which is a "ion-view")->side-menu page(side-menu from ionic framework)->page2.html page(which is a "ion-view"). Now i want to implement "ion-nav-bar" with "ion-nav-back-button" in it. Normally when i want to go back from page2.html the app should sent me to side-menu page....instead, my app, sent me to login page. Seems like side-menu does not have "ion-view" in it and it is not recorded in app flow. Any suggestion how can i solve that ? thank you
There is no a state for side menu, you can not 'go back' to open side menu.
In the normal, for the login view, you should disable the state temporally. Then the app will not 'go back' to login view. You can do it like this:
$scope.doLogin = function () {
Auth.login($scope.loginData, function () {
console.log('login success');
$ionicHistory.nextViewOptions({
disableBack: true
});
$state.go('home');
});
};
And you can also clear the view history of ionic to avoid going back with:
$ionicHistory.clearHistory();
$state.go('user.home');