首页 文章

导航到同一页面时,我遇到“历史回复”的问题

提问于
浏览
1

当我导航到相同的组件(使用nativescript angular)时,我可以拦截params更改但是当我点击Android Back按钮时,它不会返回到上一页 .

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.
        });
}

我使用不同的URL“home” - >“group / 1” - >“group / 2” - >“group / 3”在同一页面“group /:id”中导航 . 如果我在“group / 3”中单击Android Back Button,我将返回“home” .

我可以在应用程序历史记录中添加“新页面”吗?

谢谢

1 回答

  • 0

    你想要做的是使用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”之外进行额外的检查

    希望这可以帮助!

相关问题