Рекурсивная навигация к тому же компоненту с историей, используя NativeScript + Angular с кнопкой возврата ActionBar?

Question

Я реализую компонент файлового браузера, используя Nativescript + Angular.

NativeScript 5.2.0-2019-01-18-12822
nativescript-angular 7.1.0

У меня есть маршрут с параметром пути и компонентом представления каталога, который вызывается рекурсивно, когда пользователь нажимает на иерархию файловой системы.

запись маршрута:

{ path: "debugfilebrowserdir/:path", component: DebugFileBrowserPageComponent } 

Я использую наблюдаемый шаблон для подписки на paramMap в ActivatedRoute в ngOnInit ():

    this.route.paramMap.subscribe( ( params ) => {
      let path = params.get( 'path' );

      // update the model with the entries from path
    }); 

Это работает как чемпион,Я могу просматривать записи каталога, и представление обновляется.

У меня есть кнопка «Назад» на панели действий:

<ActionBar class="action-bar" title="Files">
  <NavigationButton android.systemIcon="ic_menu_back" text="Back" (tap)="goBack()"></NavigationButton>
</ActionBar>  

После того, как пользователь щелкнул вниз в подкаталог, я хотел бы отобразить родительский каталог, когда кто-то нажимает кнопку назад на панели действий.Я могу сделать это с помощью отдельной кнопки, но это выглядит просто сбивающим с толку.

Проблема в том, что когда нажимаю кнопку «Назад», независимо от того, насколько глубоко я в дереве каталогов, она возвращает меня к корневому компоненту, а непредыдущий вид.Я предполагаю, что это потому, что мой компонент просмотра каталога используется повторно каждый раз, когда отображается подкаталог.(Проверено, что ngOnInit больше не вызывается.)

Я думал, что должен быть какой-то способ динамически помещать запись в стек истории или вызывать многократное создание компонента представления моего каталога, но пока яничего не нашел.

Существует ли способ манипулирования стеком истории навигации, чтобы при нажатии кнопки «Назад» я мог повторно отображать один и тот же компонент с различными параметрами (т.е. в этом случае показывать один и тот же компонент с путемродительский каталог)?

Связанный вопрос без ответа У меня проблема с «историей назад» при переходе на ту же страницу

Answer 1

То, что вы хотите сделать, это использовать CustomRouteReuseStrategy

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot } from '@angular/router';
import { NSLocationStrategy } from 'nativescript-angular/router/ns-location-strategy';
import { NSRouteReuseStrategy } from 'nativescript-angular/router/ns-route-reuse-strategy';

@Injectable()
export class CustomRouteReuseStrategy extends NSRouteReuseStrategy {

     constructor(location: NSLocationStrategy) {
         super(location);
     }

     shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
         return false;
     }
}

, и внутри вашего AppModule вы хотите поместить его в качестве провайдера

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { RouteReuseStrategy } from "@angular/router";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";

import { AppRoutingModule } from "./app-routing.module";
import { CustomRouteReuseStrategy } from "./custom-router-strategy";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        {
            provide: RouteReuseStrategy,
            useClass: CustomRouteReuseStrategy
        }
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

, вот пример в play.nativescript.org

https://play.nativescript.org/?template=play-ng&id=AspHuI

(я не сделал этого, я просто передаю информацию, которую я узнал.)

Кроме того, если вы только хотитена некоторых страницах для повторного использования стратегии маршрута вам потребуется внести дополнительные изменения в код

 shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
// first use the global Reuse Strategy evaluation function,
// which will return true, when we are navigating from the same component to itself
let shouldReuse = super.shouldReuseRoute(future, current);

// then check if the noReuse flag is set to true
if (shouldReuse && current.data.noReuse) {
  // if true, then don't reuse this component
  shouldReuse = false;
}

, а затем вы можете передать noReuse в качестве параметра маршрута, чтобы у вас была дополнительная проверка помимо значения по умолчанию «shouldReuse»

Надеюсь, это поможет!