我对“历史回顾"有疑问当导航到同一页面时 [英] I have an issue with "history back" when navigate to same page
问题描述
当我导航到同一个组件(使用 nativescript angular)时,我可以拦截参数更改,但是当我点击 Android 后退按钮时,它不会返回上一页.
When I navigate to the same component (with nativescript angular), I can intercept the params change but when i tap the Android Back button, it doesn't return back to previous page.
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"中导航,使用不同的urlhome"->group/1"->group/2"->group/3".如果我单击group/3"中的 Android Back Button,我将返回home".
I navigate in the same page "group/:id" with different url "home" -> "group/1" -> "group/2" -> "group/3". If I click Android Back Button in "group/3", I return to "home".
我可以在应用历史记录中添加新页面"吗?
Can I add the "new page" in the application history?
谢谢
推荐答案
你想做的是使用 CustomRouteReuseStrategy
What you want to do is use a 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 中,你想把它作为提供者
and inside your AppModule you want to put this as a provider
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 中的一个例子
here is a example in play.nativescript.org
https://play.nativescript.org/?template=play-ng&id=AspHuI
(我没有做这个,我只是传递我学到的信息.)
(I didn't make this, I am just passing on the info that I have learned.)
此外,如果您只希望某些页面重用路由策略,则需要对代码进行额外更改
Also, if you only want certain pages to reuse the route strategy then you would need to make additional changes of code
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"之外进行额外的检查
and then you could pass noReuse as a route param so that you have an additional check beyond the default "shouldReuse"
希望这有帮助!
这篇关于我对“历史回顾"有疑问当导航到同一页面时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!