UIRouter 转换挂钩未在 angular 通用中触发

Question

当 angular universal 执行时，我在 UI-路由器挂钩中遇到了一个奇怪的行为。

对于在 UI-Router' 状态中声明的钩子（即 onEnter、onExit），它们在 angular（在浏览器）和 angular 通用。

但是，例如在 angular 单例服务中监视 TransitionService 钩子，它们只在 angular 中触发（在浏览器上）；它们在 angular 通用中被忽略。

这是一个错误还是我遗漏了什么？

我使用的单例服务：

@Injectable()
export class SingletonService {
  constructor(transitionService: TransitionService) {
    transitionService.onEnter({}, this.onEnterStateChange.bind(this));
  }

  private onEnterStateChange(transition: Transition, state?: StateDeclaration): void {
    // something here

    // ✓ called on browser
    // ✗ ignored on universal
  }
}

库版本：

angular+通用5.2.6
ui-路由器angular1.0.1

Answer 1

我们找到了问题的根源，这不是bug，而是对通用环境下UIRouter交互的误解。

在server-side渲染过程中，组件渲染是在ui-router完成路由后进行的，在最后删除。在我们的代码中，单例是在 app-module 中提供的，甚至为时已晚；钩子注册得太晚了。

关于这个标志：deferInitialRender: true。

解决方案是在一开始就注册并强制创建单例服务，方法是将其注入 app-module 的构造函数中。

希望这对其他人有帮助。

UIRouter 转换挂钩未在 angular 通用中触发

UIRouter transition Hooks not fired in angular universal

angular

angular-ui-router

angular-universal