$rootScope 在导航时重置 Angular 11 - AngularJS 混合

Question

我正在逐渐将一个相当大的 AngularJS 应用程序迁移到 Angular 11。到目前为止，我已经成功地重写了 Angular 中的登录/注册页面11 并且 AngularJS 应用程序在成功验证后延迟加载，如下所示：

const routes: Routes = [{
    path: "access",
    canActivate: [AccessGuard],
    loadChildren: () => import("./access/access.module").then(m => m.AccessModule)
}, {
    matcher: isAngularJSUrl, component: AngularJSComponent
}, {
    path: "",
    redirectTo: "/access",
    pathMatch: "full"
}];

isAngularJSUrl 匹配器仅排除登录和注册端点。 AngularJS 应用程序在经过身份验证后几乎可以完美运行，但作为步骤的一系列 4 页除外（第 1 步 -> 单击下一步 -> 第 2 步 ->...）。旧代码库广泛使用 $rootScope 来管理这 4 个页面之间的内部状态更改。事实证明，每次路由更改（例如从第 1 页到第 2 页）时，路由更改事件“冒泡”到 Angular 11 路由器，我知道这是因为它命中了 isAngularJSUrl上面提到的匹配器。

因此 $rootScope 的内容被重置，下一页无法使用。我试图找到一种方法让 AngularJS 应用程序不点击 Angular 11 路由器，但我所有的尝试（使用 canDeactivate 防护，订阅 NavigationStart）到目前为止都失败了。

这是加载 AngularJS 应用程序的 Angular11 组件：

export class AngularJSComponent implements OnInit, OnDestroy {
    constructor(
        private lazyLoader: LazyLoaderService,
        private elRef: ElementRef,
        private _router: Router
    ) { }

    async ngOnInit() {
        await this.lazyLoader.load(this.elRef.nativeElement);
    }


    ngOnDestroy() {
        this.lazyLoader.destroy();
    }
}

Answer 1

对于可能有类似问题的任何人。解决方案是在 isAngularJSUrl 匹配器上添加根（“/”）路由。

同时从您的 AngularJS 路由器中删除任何 $urlProvider.otherwise 代码

$rootScope 在导航时重置 Angular 11 - AngularJS 混合

$rootScope resets on navigation Angular 11 - AngularJS Hybrid

javascript

angularjs

angular

router

rootscope