Angular 无法用不同数量的子节点重新附加 ActivatedRouteSnapshot答案

【问题标题】：Angular Cannot reattach ActivatedRouteSnapshot with a different number of childrenAngular 无法用不同数量的子节点重新附加 ActivatedRouteSnapshot
【发布时间】：2019-05-20 10:02:37
【问题描述】：

这是我在 nativescript-angular 项目中的路由：

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]
})

导致错误的场景：首先应用程序从选项卡路由开始，然后我进入登录页面，然后我去注册，然后再次进入选项卡页面（并清除历史记录）。之后，如果我再次进入登录页面并返回上一个（标签页），则会发生错误。

错误：

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...

有什么想法吗？

【问题讨论】：

你试过没有 cleanHistory 吗？
@Narendra 我仍然得到了 clearHistory 的错误。
@Narendra 你可以使用这个 repo 进行测试：github.com/NativeScript/login-tab-navigation-ng/issues/7
你是用RouterModule.forRoot来初始化这个还是this.router.resetConfig？你能添加你使用这个数组的模块部分吗？
@Thatkookooguy 我使用forRoot 进行初始化。更新了内容。请再看一遍。谢谢。

标签： angular angular-router nativescript-angular

【解决方案1】：

尝试改变第一条路线

{
    path: "",
    redirectTo: "tabs",
    pathMatch: "full"
}

然后像这样设置你的TabsModule

const routes: Routes = [    
    {
        path: "",
        redirectTo: "default",
        pathMatch: "full"
    },
    {
        path: "default",
        component: YourDefaultComponent
    }
    ...
];

更新：如果遇到同样的错误，可以使用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:

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 {
}

【讨论】：

感谢您的回答。但是，我仍然遇到同样的错误。
你的意思是我必须有一个 CustomReuseStrategy 并将其添加到我的提供程序？
什么是this.handlers？你在哪里定义它？
我做到了。但结果如下：首先加载标签，然后我进入登录页面，从登录我去注册。然后我回来，在登录动画中重新初始化（当我按下返回按钮时不应该这样做），然后我再次按下返回以返回选项卡，现在选项卡的内容消失了。
我使用了retrieve和shouldDetach，正如你提到的，store我什么都不做，shouldAttach我返回false，shouldReuseRoute我返回future.routeConfig === curr.routeConfig;。没事吧？

【解决方案2】：

尝试更新到 nativescript-angular 到版本 7.2.4 。您posted 的 repo 链接使用的版本是 7.2.3，其中包含一些路由问题。

https://github.com/NativeScript/nativescript-angular/pull/1740

【讨论】：

谢谢。但是在将nativescript-angular 更新到版本 7.2.4 后，我仍然遇到同样的错误。你能重现这个问题吗？
你可以创建游乐场吗？
@VahidNajafi 您是否尝试通过添加此import {Router} from "@angular/router"; this.router.routeReuseStrategy.shouldReuseRoute = function(){ return false;}; 来禁用路由恢复

【解决方案3】：

您是否尝试过传递 relativeTo 附加功能？奇怪的是，这对我有用，我不知道如何以及为什么。

this.routerExtension.back({relativeTo: this.activatedRoute});

像这样。

【讨论】：