Ionic 4 - определение наличия навигации вперед

Question

В настоящее время я обновляю приложение Ionic 1 до Ionic 4.

Мне нужно знать, есть ли у текущей страницы «forwardView». Это означает, что мне нужно знать, посетил ли пользователь страницу, используя «обычную» прямую ссылку или «ионную кнопку возврата» (соответственно кнопку возврата браузера)

В 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), событие будет вызвано как обязательное

Для лучшего понимания я рекомендую посетить Использование событий маршрутизатора для обнаружения обратной и прямой навигации в браузере под углом 7.0.4