Angular 无法使用不同数量的孩子重新附加 ActivatedRouteSnapshot [英] Angular Cannot reattach ActivatedRouteSnapshot with a different number of children
问题描述
这是我在 nativescript-angular 项目中的路由:
Here is my routing in a nativescript-angular project:
const routes: Routes = [
{
path: "",
redirectTo: "/tabs/default",
pathMatch: "full"
},
{
path: "tabs",
loadChildren: "~/app/modules/tabs/tabs.module#TabsModule"
},
{
path: "login",
loadChildren: "~/app/modules/login/login.module#LoginModule"
},
{
path: "register",
loadChildren: "~/app/modules/register/register.module#RegisterModule"
}
];
@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules
})],
exports: [NativeScriptRouterModule]
})
导致错误的场景:首先应用程序从选项卡路由开始,然后我转到登录页面,然后我去注册,然后我再次转到选项卡页面(并清除历史记录).之后如果我再次进入登录页面并返回上一个(标签页),就会发生错误.
The scenario which leads to the error: First the app starts with tabs route, then I go to the login page, after that I go to register and then again I go to tabs page (and clean the history). After that if I go to login page again and get back to previous one (tabs page), the error occurs.
错误:
JS: Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
JS: at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1950:19) [angular]
JS: at setFutureSnapshotsOfActivatedRoutes (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1954:13) [angular]
JS: at createNode (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1935:17) [angular]
JS: at file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1975:20 [angular]
JS: at Array.map (<anonymous>) [angular]
JS: at createOrReuseChildren (file:///data/data/org.nativescript.tns57/files/app/tns_modules/@angular/router/bundles/router.umd.js:1958:30) [angular]
JS: at createNode (file:///data/data/org...
有什么想法吗?
推荐答案
尝试改变第一条路线
{
path: "",
redirectTo: "tabs",
pathMatch: "full"
}
并像这样设置您的TabsModule
const routes: Routes = [
{
path: "",
redirectTo: "default",
pathMatch: "full"
},
{
path: "default",
component: YourDefaultComponent
}
...
];
UPDATE :如果你遇到同样的错误,你可以使用 AttachDetachReuseStrategy
UPDATE : If you get an same error, you can use AttachDetachReuseStrategy
import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';
interface RouteStorageObject {
snapshot: ActivatedRouteSnapshot;
handle: DetachedRouteHandle;
}
export class CustomReuseStrategy implements RouteReuseStrategy {
handlers: { [key: string]: RouteStorageObject } = {};
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!route.routeConfig) return null;
if (route.routeConfig.loadChildren) return null;
return this.handlers[route.routeConfig.path];
}
.....
}
然后我让 shouldDetach
函数也检查 loadChildren 以防止 RouteReuseStrategy
保存错误 ActivatedRouteSnapshot:
then I make shouldDetach
function also check for loadChildren to prevent RouteReuseStrategy
save wrong ActivatedRouteSnapshot:
shouldDetach(route: ActivatedRouteSnapshot): boolean {
if (!route.routeConfig || route.routeConfig.loadChildren) {
return false;
}
return true;
}
当然,修改你的AppModule
@NgModule({
imports: [...],
providers: [
{provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
],
....
)}
export class AppModule {
}
这篇关于Angular 无法使用不同数量的孩子重新附加 ActivatedRouteSnapshot的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!