Ionic 4 - проверьте, можно ли вернуться
Я ищу способ перенаправить пользователя обратно после нажатия кнопки, если он существует, и на определенный маршрут в противном случае.
Мне нужно добавить условие в мой код, но я, кажется, не нахожу способа.
goback() {
if ("something") {
this.navCtlr.setDirection('back');
this.location.back();
}
else {
this.router.navigate(['/']);
}
}
В Ionic 3 у нас была функция canGoBack() 1… Есть идеи для Ionic 4? Поскольку он использует маршрутизатор Angular...
Спасибо.
Ответы 3
Поскольку Ionic 4 использует Angular Routing, поэтому вы можете реализовать эту функциональность способом Angular, вы можете добиться этого, создав такой сервис:
import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Injectable()
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;
}
}
А теперь внедрите этот сервис в компонент, в котором вы хотите проверить свое состояние:
В вашем компоненте:
import { Component } from '@angular/core';
import { PreviousRouteService } from '../services/previous-route.service';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(private previousRouteService: PreviousRouteService) {}
goback() {
if (this.previousRouteService.getPreviousUrl()) {
this.navCtlr.setDirection('back');
this.location.back();
}
else {
this.router.navigate(['/']);
}
}
}
Единственная идея, которая приходит мне в голову, - это использование защиты маршрута Angular, чтобы разрешить или запретить возврат назад, даже функция разрешения была бы несколько полезной.
Это и использование службы истории навигации (RoutingStateService), такой как упомянутый в https://blog.hackages.io/our-solution-to-get-a-previous-route-with-angular-5-601c16621cf0. В тех случаях, когда я использовал RoutingStateService для обработки своей истории навигации, это было намного надежнее, чем прямое доверие событиям NavigationEnd (поскольку RouterStateService использует его внутри).
Надеюсь, поможет. С наилучшими пожеланиями.
Разве вы не можете использовать <ion-back-button> с defautHref?
<ion-back-button defaultHref = "/"></ion-back-button>
Привет, кажется интересным (я не уверен, что это сработает, и сейчас не могу проверить, давно ушел) - хотя ion-back-button не появляется, если нет истории, я думаю?
добавив defaultHref, если истории нет, он ее «создает», поэтому кнопка «Назад» будет там :)
NIce и легко, но не может быть предотвращено или отложено с операциями до обратного действия (т.е. сохранить данные, прежде чем вернуться)
Хотя, к сожалению, это не работает :( Я добавил
console.info(this.currentUrl, this.previousUrl, event.url, event instanceof NavigationEnd);в функцию прослушивания событий, и получил очень большой список/item/item_id undefined undefined falseответов, пока один не верен в конце концов, а затем куча других, гдеthis.previousUrl(как и должно быть быть, так как он виделNavigationEnd) так же, какthis.currentUrl. Поэтому, когдаgoBack()срабатывает, он видитpreviousUrlтам, где не должен, - таким образом, не достигая желаемого эффекта.