angular - UI-路由器混合 : NG2 states not working before an NG1 state with an NG2 component is triggered

Question

我有一个大型 angularjs 1.7.4 应用程序，其 UI 路由器采用 HTML5 模式，具有多个入口点。

(该项目使用 babel 7.6 来编译 typescript 和 corejs3 polyfill，所以我没有使用 angular-cli)。

我正在尝试将入口点之一迁移到混合应用程序(Angular 8.2.13、@uirouter/angular-hybrid 9.0.0)。

我已遵循迁移指南@ https://angular.io以及指南 https://github.com/ui-router/angular-hybrid除了 Angular 中的状态定义之外，一切似乎都正常。它们仅在触发带有 Angular 组件的 angularjs 状态后才起作用。

尝试使用之前的 NG2 状态时，控制台中没有任何内容(为 ui-router 启用了跟踪)。

我已经被这个问题困扰好几天了，我没有主意了......

ng1hello - 具有 Angular 分量的 ng1 状态ng2hello - 具有 Angular 分量的 Angular 状态ng1hi - 具有 Angular 分量的 ng1 状态ng2hi - 具有 Angular 分量的 ng2 状态

案例1:

1. 重新加载“/”:好的。
2. 点击“ng1hello”的 ui-sref。好的
3. 点击“ng2hello”的 ui-sref。好的
4. 点击“ng2hi”的 ui-sref。好的

案例2:

1. 重新加载“/”:好的。
2. 点击“ng2hello”的 ui-sref。不行
3. 点击“ng2hi”的 ui-sref。不行
4. 点击“ng1hello”的 ui-sref。好的
5. 点击“ng2hello”的 ui-sref。好的
6. 点击“ng2hi”的 ui-sref。好的

案例3:

1. 重新加载“/ng1hello”即可。

案例4:

1. 重新加载“/ng2hello”不行。

编辑:我在 Stackblitz 中重现了这个问题: https://angular-hybrid-issue.stackblitz.io/ https://stackblitz.com/edit/angular-hybrid-issue

Answer 1

我显然使用了错误的方法来获取 main.ts(Angular 上下文)中的 UrlService

原为:

    import {getUIRouter} from "@uirouter/angular-hybrid";
    const urlService: UrlService = getUIRouter(platformRef.injector).urlService;

应该是:

const urlService: UrlService = platformRef.injector.get(UrlService); 

https://github.com/ui-router/angular-hybrid/issues/368