Physical Back Button and Back Button Menu:
defaultHref makes the button show up on mine tooā¦unfortunately, now it seems to show constantly. Even when there shouldnāt be anything in the navigation stack. Any chance you have that same behavior?
1 Like
Hi, I moved the header to its own component and gave that a hasMenu attribute which determines in the template if the menu oder back button should show, like so:
<ion-menu-button *ngIf="hasMenu"></ion-menu-button>
<ion-back-button *ngIf="!hasMenu" [text]='' [defaultHref]="target"></ion-back-button>
Never tried it without that.
1 Like
<ion-buttons slot=āstartā> <ion-back-button ></ion-back-button> </ion-buttons>
This is dump, I mean Ionic back button itself, totally useless, but I solved the issue by creating my own service and component to replace it, so:
Service:
import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class PreviousRouteService {
private previousUrl: string;
private currentUrl: string;
constructor(private _router: Router) {
this.currentUrl = this._router.url;
_router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.previousUrl = this.currentUrl;
this.currentUrl = event.url;
}
});
}
public getPreviousUrl() {
return this.previousUrl;
}
}
And then component:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-back-button',
template: `
<ion-button [href]="href" color="light">
<ion-icon slot="start" name="arrow-back" ></ion-icon>
Back
</ion-button>
`,
styleUrls: ['./app-back-button.scss']
})
export class AppBackButton {
@Input() href: string;
constructor() {
if (!this.href) {
console.warn('Href for app-back-button is not set');
}
}
}
And inside my page component template where I use my component instead of ionic one:
<ion-buttons slot="start">
<app-back-button [href]="previousPage"></app-back-button>
</ion-buttons>
And for previousPage I use router inside my page component class:
constructor(private _router: Router, private _previousRouteService: PreviousRouteService) {
this._router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.previousPage = _previousRouteService.getPreviousUrl();
if (!this.previousPage || this.previousPage.length <= 2) {
this.previousPage = '/home';
}
}
});
}
Could be much cleaner as I can move the last block of code to be inside the component, but for now, this is a quick draft that worked for me, at least it is 100% better than the one provided by Ionic.
4 Likes
What i did is the following:
<ion-buttons slot="start">
<ion-button color="dark" (click)="goBack()">
<ion-icon name="arrow-back"></ion-icon>
</ion-button>
</ion-buttons>
goBack() {
this.navCtrl.goBack();
}
Is this the only way of getting this button swap?
I may be getting something really wrong. Just couldnāt get <ion-menu-button> changing to <ion-back-button> yet when thereās history. Just posted here the code: https://github.com/ionic-team/ionic/issues/15316 - it would be awesome if someone that has already solved something similar could take a look.
1 Like
thank very much. this is a much more through solution. this is valuable for a scenario in which the previous page can not be āpre-determinedā. for example, a page that can be accessed via multiple routes.
Thanks. I got solution to Back button
Maybe too late but i solved the issue by creating the component like this
import { Component, OnInit, OnDestroy } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { IonRouterOutlet } from '@ionic/angular';
@Component({
selector : 'app-header',
templateUrl: './header.component.html',
styleUrls : ['./header.component.scss']
})
export class HeaderComponent implements OnInit, OnDestroy {
private routerEvents: any;
private previousUrl: string;
private currentUrl: string;
private canGoBack: boolean;
constructor(
private router: Router,
private ionRouterOutlet: IonRouterOutlet
) {
}
ngOnInit() {
this.canGoBack = this.ionRouterOutlet.canGoBack();
this.currentUrl = this.router.url;
this.routerEvents = this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.previousUrl = this.currentUrl;
this.currentUrl = event.url;
}
});
}
ngOnDestroy() {
this.routerEvents.unsubscribe();
}
}
<ion-header class="app-header">
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button *ngIf="canGoBack" defaultHref="previousUrl"></ion-back-button>
<ion-menu-button></ion-menu-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
3 Likes
thanks! it works adding the defaultHref
I tested using this, and not sure is this because of using the href? I feel like it took the pages 3seconds to load? and if I am using code :
this.router.navigate([ā/introā]); this is much faster?
@almothafar_capella thanks for this snippet. As far as I can tell, this is the only solution I have found for the that actually works. It never renders otherwise.
Thanks!
I get always 'Href for app-back-button is not set' warn. Where should I define href?
If it is working, you can ignore that warning, this warning because I try to see the href value in constructor, move it to OnInit, my final version of this is just different, I posted my first version that was still under development.
Also my component and service snippet posted here is handling only 1 way direction, and 2 levels only, you may need to change to to array and push/pop instead, as for example if you go from A -> B -> C it will work from C -> B then B -> C, no way to get A again.
The code is just about the idea, not copy/paste ready, My first version was in my first app version that got only 2 levels, A -> B, A -> C, A -> D ā¦ etc in this case copy/paste is enough.
Hello, I have an issue, since the same page can be accessed through different pages, if I use a defaultHref=āhomeā there would be an issue if I accessed it from a different page. isnāt there a way to navigate to the back page the navigation came from?
2 Likes
hello gys when i am select the page in my side menu and go back with the help of mobile devide button but i am not able to go back any idea to resolve this ishu plese share solution .
thanks
hello gys when i am select the page in my side menu and go back with the help of mobile devide button but i am not able to go back on home page any idea to resolve this ishu plese share solution .
thanks