I am currently upgrading an Ionic 1 app to Ionic 4.
I need to know, if the current page has a "forwardView" available. Meaning I need to know if the user visited the page by using a "normal" forward link, or by using the "ion-back-button" (respectively the browser back button)
In Ionic 1 we used the feature "forwardView()": http://ionicn.com/docs/api/service/$ionicHistory/
The code looked something like this:
class ListViewContentController {
static $inject = [
'$ionicHistory',
]
constructor(private $ionicHistory: ionic.navigation.IonicHistoryService) {}
public someMethod(){
const forwardView = this.$ionicHistory.forwardView();
if (forwardView) {
// Do something if a forward view is available
} else {
// Do something else if there is no forward view
}
}
}
How do I achieve the same funtionality with the router in Ionic4 / Angular 7 ?
Let's assume the following example for better understanding
In the app.component.html we have three links:
<nav>
<a routerLink="./section-a">Section A</a>
<a routerLink="./section-b">Section B</a>
<a routerLink="./section-c">Section C</a>
</nav>
<router-outlet></router-outlet>
And in the app.component.ts
import { Component } from "@angular/core";
import { Event as NavigationEvent } from "@angular/router";
import { filter } from "rxjs/operators";
import { NavigationStart } from "@angular/router";
import { Router } from "@angular/router";
@Component({
selector: "my-app",
styleUrls: [ "./app.component.sass" ],
template: './app.component.html'
})
export class AppComponent {
// I initialize the app component.
constructor( router: Router ) {
router.events
.pipe(
// The "events" stream contains all the navigation events. For this demo,
// though, we only care about the NavigationStart event as it contains
// information about what initiated the navigation sequence.
filter(
( event: NavigationEvent ) => {
return( event instanceof NavigationStart );
}
)
)
.subscribe(
( event: NavigationStart ) => {
console.group( "NavigationStart Event" );
// Every navigation sequence is given a unique ID. Even "popstate"
// navigations are really just "roll forward" navigations that get
// a new, unique ID.
console.log( "navigation id:", event.id );
console.log( "route:", event.url );
// The "navigationTrigger" will be one of:
// --
// - imperative (ie, user clicked a link).
// - popstate (ie, browser controlled change such as Back button).
// - hashchange
// --
// NOTE: I am not sure what triggers the "hashchange" type.
console.log( "trigger:", event.navigationTrigger );
// This "restoredState" property is defined when the navigation
// event is triggered by a "popstate" event (ex, back / forward
// buttons). It will contain the ID of the earlier navigation event
// to which the browser is returning.
// --
// CAUTION: This ID may not be part of the current page rendering.
// This value is pulled out of the browser; and, may exist across
// page refreshes.
if ( event.restoredState ) {
console.warn(
"restoring navigation id:",
event.restoredState.navigationId
);
}
console.groupEnd();
}
)
;
}
}
And your routes array
RouterModule.forRoot(
[
{
path: "section-a",
component: SectionAComponent
},
{
path: "section-b",
component: SectionBComponent
},
{
path: "section-c",
component: SectionCComponent
}
],
{
// Tell the router to use the hash instead of HTML5 pushstate.
useHash: true,
}
)
When you run the code and navigate for Section B and you want to return to A:
For better understanding i recommend you to visit Using Router Events To Detect Back And Forward Browser Navigation In Angular 7.0.4