I want to navigate the same page using routing in Ionic 4.
I already tried this code but not work properly this.navCtrl.navigateRoot('super');
itemClicked(event) {
this.navCtrl.navigateRoot('super');
}
I expect the page navigate to the same page in Ionic 4
to navigate to page use :
this.navCtrl.navigateRoot(['/route',object]);
{
path: '',
component: MyPage
},
{
path: ':id',
component: MyPage
}
The best approach would be to set onSameUrlNavigation, telling angular to reload.
If not, a hack would be to use navigateByUrl.
this.router.navigateByUrl(`/super/${id}`);
This way, you are passing a parameter and the reloading will be done because angular detects a different url and navigates to it (if the current page does not have the same passed id though). It's not the prettiest approach in this case though. Just a work around.
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 very basic ionic app. I want to show splash, then admob interstitial and on close of interstitial, i want to redirect to home page.
The only problem which I am facing here is updating the view in the home page. In home page, i have very simple text box and button. I am using 2 way data binding here and its not working at all.
I have created repo for this if somebody wants to have a look and let me know why the view is not updating.
https://github.com/krishnaa99/admobissue
Demo Video
https://www.youtube.com/watch?v=t_BKJ1mGpag
if the value is changing in component but not in view(html) then after action in component use this.
import { ChangeDetectorRef } from '#angular/core';
constructor(private changeRef: ChangeDetectorRef){}
this.changeRef.detectChanges();
i hope it can help.
Possible solutions you can try
you should check the logs for errors
Assign clear type to "input" variable. ( try making it explicitly
public )
"input" may be considered as a keyword, try using a different
variable name ( less likely )
When the user views the home screen for the first time - they are being sent there via this.nav.setRoot(Page). This presents an issue when I have three other pages settings root to a page. For example - I go to the home page, which is set root, so that home page data is loaded initially for the first time. Then the user navigates to the message page. Then the user goes back to the home page, the data is reloaded again. I don't want that to happen. I would like to only call it once, but due to setRoot, it refreshes the page. Just like how navCtrl.push(Page) and .pop, the data is not refreshed. I have a hamburger navigation style and that's why I have the set roots for each page in the hamburger navigation.
app.comp.ts
openPage() {
this.nav.setRoot(Page);
}
openPageTwo() {
this.nav.setRoot(MessagesPage);
}
How do I override the nav.setRoot refresh? Or use something else entirely?
Thanks
Exactly where are you refreshing your data? In what function?
Lifecycle events
I think your problem will be solved by using the correct lifecycle event. For example, ionViewDidLoad :
Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.
Have you tried refreshing your data there?
Global variable or service
As an alternative, you can create a global variable or a service that holds your data. Once you setRoot to a page for the first time, do the refresh and update the global value and do not refresh it the subsequent times that you setRoot to that page. This is not my favorite way, but will do the job for you.
Tabs:
Rather than setting roots several times, you may wanna try ionic tabs.
By setting a rootpage using navCtrl.setRoot(), you tell Ionic this page is the begin of the navigation tree of your application. For example, after a login, you should .setRoot(HomePage);
When you want to navigate from HomePage to MessagesPage, you should use navCtrl.push(), to pop the MessagesPage on top of the HomePage. eg; navCtrl.push(MessagesPage);
You can use a provider, since it is stored on memory once and every one that injects it will get its properties and data.
some-provider.ts
import { Injectable } from '#angular/core';
#Injectable()
export class SomeProvider {
public data: DataModel;
constructor(public http: Http) {
}
}
And then import that on your app's module providers variable.
After, get this provider on your component's constructor
some-page.ts
#Component({
selector: 'app-some-page',
templateUrl: 'app-some-page.html'
})
export class AppSomePage {
data: DataModel;
constructor(public someProvider: SomeProvider) {
this.data = this.someProvider.data;
}
}
I am working on a JQuerymobile site with multiple pages. If one of the pages is shown (id="shown"), I want a redirect to another page (id=#redirected") after a delay of 6 seconds.
In my code, the commented line works for this, but the problem is that it even redirects to the #redirected page if the user changes to another sup page in the meantime. So what I would need would be an "if other page is not shown" thing in here.
I also tried with JQuery "changePage" (which would be good to handle transitions etc.), but I don't know how to implement a delay here.
Please see my code:
$("#shown").bind("pageshow", function(e) {
//window.setTimeout('window.location="#redirected"; ',6000);
$.mobile.changePage("#fertig", { reverse: "false"});
I made a working jsfiddle for you:
http://jsfiddle.net/zUZMx/
Using the jQuery mobile multi-page template with three pages with ids "one", "two", and "three". When navigating to two it initiates a timeout of 6 seconds after which it checks if the active page is "two" and, if so, proceeds to redirect the user to three using mobile changePage (so you can make full use of transitions).
Javascript used:
$(document).delegate("#two", "pageshow", function(event) {
setTimeout(function() {
if($.mobile.activePage.attr("id") == "two") {
$.mobile.changePage("#three", {
transition: "slide"
});
}
}, 6000);});
If I understood your case correctly "two" would be changed to "shown" and "three" to "redirected".