导航到同一页面时，我遇到“历史回溯”问题答案

【问题标题】：I have an issue with "history back" when navigate to same page导航到同一页面时，我遇到“历史回溯”问题
【发布时间】：2016-11-26 17:24:05
【问题描述】：

当我导航到同一个组件（使用 nativescript angular）时，我可以拦截参数更改，但是当我点击 Android 后退按钮时，它不会返回到上一页。

constructor(private pageRoute: PageRoute) {
    super();
    this.pageRoute.activatedRoute
        .switchMap(activatedRoute => activatedRoute.params)
        .forEach((params) => { 
            this._groupId = params['id'];
            this.load(); // this method reload the list in the page.
        });
}

我在同一页面“group/:id”中使用不同的 url “home” -> “group/1” -> “group/2” -> “group/3” 导航。如果我点击“group/3”中的Android Back Button，我会返回“home”。

我可以在申请历史中添加“新页面”吗？

谢谢

【问题讨论】：

你试过docs.nativescript.org/angular/core-concepts/…
Android 后退按钮可以工作，但应用程序逻辑会跳过与同一组件相关的所有页面。
如果可能，该问题需要MCVE。并且有必要知道是否可以在没有 Nativescript 的情况下复制相同的问题。
@Alex 你解决过这个问题吗？我也有同样的问题...

标签： angular nativescript angular2-nativescript

【解决方案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”之外进行额外检查

希望这会有所帮助！

【讨论】：