如何使用降级模块（）使用 ui-router 混合引导应用程序

Question

我正在使用“ui-router”混合（https://github.com/ui-router/angular-hybrid）引导“经典”方式。

我们在“悬停”和其他数据网格中明显的事件上遇到了性能问题。 我们认为这是由于此处描述的 2 个版本之间的变更检测重叠/相乘所致。

https://pr18487-aedf0aa.ngbuilds.io/guide/upgrade-performance

我正在尝试使用上述文档中描述的 downgradeModule() 引导方法来解决性能问题，但未能解决。

不能有 Angular 模块引导程序，但没有错误。 这是我的做法。联系人按钮（Angular 模块）什么都不做。

https://stackblitz.com/edit/github-ypge8f-jmshp3

我还尝试直接引导“Contacts”Angular 模块（“App”延迟加载“Contacts”并认为这可能是一个问题）但结果是一样的。 这个问题也发here

Answer 1

经过长期的努力，我想我终于弄明白了。 ui-router 使处理这个问题变得更加困难，因为所有使用 downgradeModule 的 Angular 混合示例都使用内置路由器。 更新了代码以使其工作： https://stackblitz.com/edit/github-ypge8f-jmshp3 技巧是：

• Angular 引导模块需要一个“UIRouter”类型的参数 构造函数，否则它不会引导其状态：

export class AppModule { constructor(private router: UIRouter) { // "router" needed in constructor to bootstrap angular states }

• urlService 必须在引导之前停止并在之后重新启动， 就像在常规混合示例中一样

• 重新启动 urlService 已 发生在“setTimeout”调用中（找不到更好的挂钩方式 此操作）以允许 Angular 状态在重新加载时引导 带有来自这些州之一的网址的页面。

setTimeout(() => { // setTimeout needed to allow angular routes to initialize after refresh urlService.listen(); urlService.sync(); });