Ionic 4 - 确定是否有可用的前向导航

Question

我目前正在将 Ionic 1 应用程序升级到 Ionic 4。

我需要知道当前页面是否有 "forwardView" 可用。这意味着我需要知道用户是通过使用 "normal" 转发 link 还是使用 "ion-back-button"（分别是浏览器后退按钮）

访问了该页面

在 Ionic 1 中，我们使用了功能 "forwardView()"：http://ionicn.com/docs/api/service/$ionicHistory/

代码看起来像这样：

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
        }
    }
}

如何在 Ionic4 / Angular 7 中实现与路由器相同的功能？

Answer 1

为了更好的理解，我们假设下面的例子

在 app.component.html 中我们有三个链接：

<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>

并且在 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();

                }
            )
        ;

    }

}

还有你的路由数组

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,
            }
        )

当您运行代码并导航到 Section B 并且您想 return 到 A:

如果点击 back-button 事件将被触发为 popStat
如果您使用正常导航（即您单击了 A 部分），该事件将作为命令触发

为了更好地理解，我建议您访问Using Router Events To Detect Back And Forward Browser Navigation In Angular 7.0.4

Ionic 4 - 确定是否有可用的前向导航

Ionic 4 - determing if there is a forward-navigation available

angular

ionic-framework

angular7

ionic4

angular7-router