Question

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

我需要知道，当前页面是否有可用的“ forwardView”。这意味着我需要知道用户是通过使用“常规”前向链接还是通过使用“ 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时，您想返回到A：

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

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

离子4-确定是否有向前导航功能

1 个答案: