离子4-确定是否有向前导航 [英] Ionic 4 - determing if there is a forward-navigation available

问题描述

我目前正在将Ionic 1应用程序升级到Ionic4.

I am currently upgrading an Ionic 1 app to Ionic 4.

我需要知道，当前页面是否有可用的"forwardView".这意味着我需要知道用户是通过使用常规"前向链接还是通过使用"ion-back-button"(分别为浏览器后退按钮)访问了页面

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)

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

In Ionic 1 we used the feature "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中实现与路由器相同的功能?

推荐答案

为了更好的理解，我们假设以下示例

Let's assume the following example for better understanding

在app.component.html中，我们具有三个链接:

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>

在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时，您想返回到A:

When you run the code and navigate for Section B and you want to return to A:

• 如果单击后退按钮，则事件将触发为popStat
• 如果您使用常规导航(即您单击A部分)，则该事件将被强制触发

为了更好地理解，我建议您访问

For better understanding i recommend you to visit Using Router Events To Detect Back And Forward Browser Navigation In Angular 7.0.4

这篇关于离子4-确定是否有向前导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！