UI-路由器混合：在触发带有 NG2 组件的 NG1 状态之前，NG2 状态不起作用

Posted 2023-02-19

【中文标题】UI-路由器混合：在触发带有 NG2 组件的 NG1 状态之前，NG2 状态不起作用

【英文标题】：UI-router hybrid: NG2 states not working before an NG1 state with an NG2 component is triggered

【发布时间】：2020-02-29 23:18:22

【问题描述】：

我有一个大型 angularjs 1.7.4 应用程序，其 UI-router 在 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 - 带有角度分量的 ng1 状态 ng2hello - 带有角度分量的角度状态 ng1hi - 具有角度分量的 ng1 状态 ng2hi - 具有角度分量的 ng2 状态

案例一：

重新加载“/”：好的。 单击“ng1hello”的 ui-sref。好的 单击“ng2hello”的 ui-sref。好的 单击“ng2hi”的 ui-sref。好的

案例 2：

重新加载“/”：好的。 单击“ng2hello”的 ui-sref。不行 单击“ng2hi”的 ui-sref。不行 单击“ng1hello”的 ui-sref。好的 单击“ng2hello”的 ui-sref。好的 单击“ng2hi”的 ui-sref。好的

案例 3：

在“/ng1hello”上重新加载 OK。

案例 4：

在“/ng2hello”上重新加载不行。

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

【问题讨论】：

你需要分享你用来实现这个的代码。

好吧，你刚刚做了。

【参考方案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