angular - 使用 NativeScript + Angular 和 ActionBar 后退按钮递归导航到具有历史记录的同一组件？

Question

我正在使用 Nativescript + Angular 实现一个文件浏览器组件。

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

我有一个带有路径参数的路由和一个目录 View 组件，当用户点击文件系统层次结构时会递归调用该组件。

路由入口:

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

我正在使用可观察模式来订阅 ngOnInit() 中的 ActivatedRoute 上的 paramMap:

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

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

这就像冠军一样。我可以点击目录条目， View 就会更新。

我在 ActionBar 中有后退按钮:

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

一旦用户单击进入子目录，我想在有人单击操作栏后退按钮时显示父目录。我可以使用单独的按钮来完成此操作，但它看起来很困惑。

问题是，当点击后退按钮时，无论我在目录树的深处有多深，它都会带我回到根组件，而不是之前的 View 。我猜这是因为每次显示子目录时我的目录 View 组件都会被重新使用。 (已验证 ngOnInit 不会再次被调用。)

我的想法是，必须有某种方法可以动态地将条目推送到历史堆栈上，或者导致我的目录 View 组件被创建多次，但到目前为止我还没有找到任何东西。

有没有办法操纵导航历史记录堆栈，以便在点击后退按钮时，我可以使用不同的参数重新显示相同的组件(即在本例中显示具有父目录路径的相同组件) ？

相关的未解答问题 I have an issue with "history back" when navigate to same page

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”之外进行额外的检查

希望这有帮助!