$rootScope 在導航時重置 Angular 11 - AngularJS 混合

Question

I am gradually migrating a rather large AngularJS app to Angular 11. Until now I have successfully re-written the sign-in / sign-up pages in Angular 11 and the AngularJS app is lazy loaded after successful authentication like this:

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 個頁面之間的內部 state 更改。 事實證明，每次路由更改（例如從第 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();
    }
}

Answer 1

對於任何可能有類似問題的人。 解決方案是在isAngularJSUrl匹配器上添加根（“/”）路由。

還要從您的 AngularJS 路由器中刪除任何$urlProvider.otherwise代碼