Angular 使用NativeScript+;递归导航到具有历史记录的相同组件;带ActionBar后退按钮的角度?
我正在使用Nativescript+Angular实现一个文件浏览器组件Angular 使用NativeScript+;递归导航到具有历史记录的相同组件;带ActionBar后退按钮的角度?,angular,nativescript,Angular,Nativescript,我正在使用Nativescript+Angular实现一个文件浏览器组件 NativeScript 5.2.0-2019-01-18-12822 nativescript-angular 7.1.0 我有一个带有路径参数和目录视图组件的路由,当用户点击文件系统层次结构时,会递归调用该路由 路线入口: { path: "debugfilebrowserdir/:path", component: DebugFileBrowserPageComponent } 我正在使用observable模
NativeScript 5.2.0-2019-01-18-12822
nativescript-angular 7.1.0
我有一个带有路径参数和目录视图组件的路由,当用户点击文件系统层次结构时,会递归调用该路由
路线入口:
{ path: "debugfilebrowserdir/:path", component: DebugFileBrowserPageComponent }
我正在使用observable模式订阅ngOnInit()中ActivatedRoute上的paramMap:
这就像一个冠军。我可以点击目录条目并更新视图
我在操作栏中有后退按钮:
<ActionBar class="action-bar" title="Files">
<NavigationButton android.systemIcon="ic_menu_back" text="Back" (tap)="goBack()"></NavigationButton>
</ActionBar>
您要做的是使用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中的一个示例
(这不是我做的,我只是在传递我学到的信息。)
此外,如果您只希望某些页面重用路由策略,则需要对代码进行其他更改
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”之外进行额外的检查
希望这有帮助 谢谢你。
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;
}