如何动态转到上一页(离子4)? [英] How to dynamically go to previous page (ionic 4)?

问题描述

当前将ionic 3项目迁移到ionic 5，在ionic 3中，我们使用this.navCtrl.getPrevious().name; 通过获取先前的页面名称来获取先前的页面名称，我将根据先前的页面名称导航到其他页面，您能帮我如何在ionic 4中获取先前的页面名称吗?

Currently im migrating my ionic 3 project to ionic 5, in ionic 3 we use this.navCtrl.getPrevious().name; to get the previous page name by getting the previous page name i will navigate to different pages based on the previous page name can you please help me how can i get previous page name in ionic 4

推荐答案

Ionic 4+从navCtrl移开，并利用了Angular Router.

Ionic 4+ moved away from navCtrl and leverages Angular Router.

要读取先前的URL(路由)，可以通过PreviousRouteService进行:

To read previous URL (route) you may do it via PreviousRouteService:

import { Injectable } from '@angular/core';
import { Router, RoutesRecognized } from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';

@Injectable({
    providedIn: "root"
})
export class PreviousRouteService {

    private previousUrl: string;
    private currentUrl: string;

    constructor(private router: Router) {

        this.currentUrl = this.router.url;
        this.previousUrl = null;

        this.router.events
                    .pipe(filter((event: any) => event instanceof RoutesRecognized), pairwise())
                    .subscribe((events: RoutesRecognized[]) => {
                        this.previousUrl = events[0].urlAfterRedirects;
                        this.currentUrl = events[1].urlAfterRedirects;
                    });

    }

    public getPreviousUrl() {
        return this.previousUrl;
    }

};

该服务将导入路由器并跟踪更改，以便任何需要先前URL信息的组件都可以导入此服务并访问先前的路由:

The service imports Router and tracks changes so that any component that needs previous URL information can import this service and access previous route:

constructor(
    private previousRouteService: PreviousRouteService
 ) {}

 const prevUrl = this.previousRouteService.getPreviousUrl();

这篇关于如何动态转到上一页(离子4)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！