I have a use case where I need to detect current view being shown to the user to report to Google Analytics. I am aware of Ionic 2's View Lifecycle hooks but that is not what I am after.
What would like to know if there is a way to 'hook' into ionic's navigation system to subscribe to navigation events and get route or view object every time user navigates the app. Since Ionic 2 is not using Angular2's Router I can't use following:
export class AppComponent {
private currentRoute:string;
constructor(_router:Router,
_location:Location) {
_router.events.subscribe((event:Event) => {
if (event instanceof NavigationEnd) {
// When the route is '/', location.path actually returns ''.
let newRoute = this._location.path() || '/';
// If the route has changed, send the new route to analytics.
if (this.currentRoute != newRoute) {
ga('send', 'pageview', newRoute);
this.currentRoute = newRoute;
}
}
});
}
}
Does anyone know how to subscribe to navigation changes in Ionic 2 app?
My current setup as of time of wrighting is:
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
You can subscribe to App Lifecycle events which are described in the docs
To be more specific, you need to inject App from ionic-angular and then add code like this where needed:
this.app.viewWillEnter.subscribe(viewCtrl => {
console.log('Entering new view')
console.log(viewCtrl)
})
Related
I've tried the two following approaches to close my ionic app but non has worked.
1.
closeApp(){
this.platform.backButton.subscribeWithPriority(999999, () => {
navigator['app'].exitApp();
})
}
In this approach, when I click on the back button, the app is disappeared, but it's in the list of the background running apps. This doesn't help me, because I need the app to be completely closed and the user be forced to reopen the app by clicking on its icon.
2.
closeApp(){
const { App } = Plugins;
App['exitApp'];
}
in this case, nothing happens, i.e., I stay on the page.
Is there any other approach or plugin which I can use?
I am working with capacitor: 3 and testing on android 12.
import { App } from '#capacitor/app';
ExitApp() {
App.exitApp();
}
try this
I am using a website in the ionic-5 web-view app. When I go back to the previous page in the Ionic app, Android device back button is not responding. I am unable to go back to previous page in the Ionic app. Ionic web-view app events are not in sync with Android device back button. Please help me to solve this issue.
You can handle hardware back button using platform
import { Platform } from '#ionic/angular';
this.platform.backButton.subscribeWithPriority(10, () => {
// route to previous page or component
});
I am working on progressive web app with ionic 3 and angular 6 framework.
Every thing works fine but when I press my browser back button or mobile back button my application get closed.
I tried to search how to do this, I am able to disable browser back button with java script but on mobile app it's not working.
<script>
// window.onbeforeunload = function() { return "Your work will be lost.";
};
$ionicPlatform.registerBackButtonAction(function (event) {
event.preventDefault();
}, 100);
</script>
I tried to register the back button event and lot's more but none of that is worked fine for me.
Can anyone have same issue then please tell me how to resolve this.
Thanks,
Dattatray
You can use Ionic's Platform to override the physical back button on Android.
Add it into app.component.ts file as such :
import { Platform } from 'ionic-angular';
constructor(public plt: Platform) {}
platform.registerBackButtonAction(() => {
//Add your code here
},100);
Ionic Platform Service.
I'm developing Android application using Ionic 1 Framework.
On using the app on mobile the color of notification bar is not changing it remains default.
Is there any specific setting or plugin that we need to use, to change color of notification bar in accordance with Nav bar color ?
With the plugin "cordova-plugin-statusbar", (https://github.com/apache/cordova-plugin-statusbar) I've done it like this :
if (window.StatusBar) {
if (ionic.Platform.isAndroid()) {
StatusBar.backgroundColorByHexString('#0288D1');
} else {
StatusBar.styleLightContent();
}
}
but if you want to link it with your nav-bar, you should use ionic color variables, like "assertive", as in this link : http://ionicframework.com/docs/components/#colors
You can read the docs at the two URLs I gave you for more informations.
Install the plugin
cordova-plugin-statusbar 2.1.3 "StatusBar"
Then inside your app.run and $ionicPlatform.ready add the following code. that is
app.run(function($ionicPlatform,$cordovaStatusbar){
$ionicPlatform.ready(function() {
if(window.StatusBar) {
$cordovaStatusbar.overlaysWebView(false)
$cordovaStatusbar.styleHex('#E52225'); //change color
}
})
})
For more details about the plugin visit
https://github.com/apache/cordova-plugin-statusbar
I need a view in my app to refresh everytime the app comes back to the foreground. The code below is working perfectly with Android but nothing happens on iOS.
$ionicPlatform.on('resume', function() {
if($state.current.name == "app.listar_aprovacoes"){
// code to refresh scope and view.
};
});
I also tried the following and it also doesn't work with iOS:
document.addEventListener("resume", function() {
var alertPopup = $ionicPopup.alert({
title: 'Foo',
template: 'Bar'
});
}, false);
So could you help me out with a solution to this problem?
Thanks!
EDIT: For some reason, updating the platform using ionic platform update ios didn't update the code for this. I removed the platform and added it again and it started working.
Try using window.addEventListener('resume', callback); as well.
Also make sure you have the Cordova Device Plugin.
You can install it by using:
ionic plugin add cordova-plugin-device
Generally, with the plugin installed, the first ($ionicPlatform.on('resume', ...)) method should work. I tested both on iOS and Android.
For some reason, updating the platform using ionic platform update ios didn't update the code for this. I removed the platform and added it again and it started working.