$rootScope 在导航 Angular 11 - AngularJS Hybrid 上重置答案

【问题标题】：$rootScope resets on navigation Angular 11 - AngularJS Hybrid$rootScope 在导航 Angular 11 - AngularJS Hybrid 上重置
【发布时间】：2021-01-20 10:46:45
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript angularjs angular router rootscope

【解决方案1】：

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

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

【讨论】：