Ui-router 子状态未加载到降级的 Angular 组件中

Question

我有一个混合/延迟加载的 Angular/AngularJS 应用程序，它使用新的 Angular 路由器和 ui-router 版本 0.4.2 以及并行出口/视图。为了实现这一点，我遵循了Victor Savkin's Lazy Loaded AngularJS guide 总的来说，这运行良好，我可以在 Angular 路由和 AngularJS 路由之间切换。但是，我遇到了第一次打开页面时不显示 ui-router 子视图的问题。

此问题仅在尝试在启动时加载子状态时才会影响状态。在路线之间导航不会遇到同样的问题。 我还确定只有当父状态模板被降级的 Ng2 组件包装时，它才会出现在路由中。

状态和模板定义

@Component({ template: '<ng-content></ng-content>'})
export class TestDowngradedComponent { }

angular.module('routerPatchModule', ['ui.router'])
.directive('downgradedComp', downgradeComponent({ component: TestDowngradedComponent }))
.config(['$stateProvider', ($stateProvider) => {
  $stateProvider.state({
    name: 'parent',
    url: '/parent',
    template: '<downgraded-comp><ui-view></ui-view></downgraded-comp>',
  })
  .state({
    name: 'parent.test',
    url: '/test',
    template: 'The child route doesn't appear on load',
  })
}]);

/**
 * Ng2 Module which upgrades the legacy Ng1 module
 */
@NgModule({
  declarations: [
    EmptyTemplateComponent,
    TestDowngradedComponent,
  ],
  entryComponents: [
    TestDowngradedComponent,
  ],
  imports: [
    SharedModule,
    UpgradeModule,
    RouterModule.forChild([
      {path: '**', component: EmptyTemplateComponent},
    ]),
  ],
})
export class LegacyAppModule {
  constructor(upgrade: UpgradeModule) {
    upgrade.bootstrap(document.body, [ng1AppModule, 'routerPatchModule'], { strictDi: true });
    setUpLocationSync(upgrade);
  }
}

跟踪状态更改事件，我能够确定子视图被临时加载但随后被删除。

状态事件日志

$viewContent Loading undefined {"view":"@"}
$viewContent Loaded  undefined {"view":"@"}

$stateChange Start   state1.child
$stateChange Success state1.child
$viewContent Loading undefined {"view":"@"}
$viewContent Loading state1 {"view":"@state1"}
$viewContent Loaded  state1.child {"view":"@state1"} // child view temporarily loaded
$viewContent Loaded  state1 {"view":"@"} // child view gone!

// User clicks link to state2
$stateChange Start   state2
$stateChange Success state2
$viewContent Loading undefined {"view":"@"}
$viewContent Loading state2 {"view":"@state2"}
$viewContent Loaded  state2 {"view":"@state2"}
$viewContent Loaded  state2 {"view":"@"}
$stateChange Start   state2.child
$stateChange Success state2.child
$viewContent Loading state2 {"view":"@state2"}
$viewContent Loaded  state2.child {"view":"@state2"} // Child loaded successfully

// User clicks link to state1
$stateChange Start   state1
$stateChange Success state1
$viewContent Loading undefined {"view":"@"}
$viewContent Loading state1 {"view":"@state1"}
$viewContent Loaded  state1 {"view":"@state1"}
$viewContent Loaded  state1 {"view":"@"}
$stateChange Start   state1.child
$stateChange Success state1.child
$viewContent Loading state1 {"view":"@state1"}
$viewContent Loaded  state1.child {"view":"@state1"} // Child loaded after parent

如果使用带有<ng-content> 的组件会导致 ui-router 无法正确呈现，我该如何解决这个问题？

Answer 1

在降级组件内使用ui-view 指令时，将ui-view 指令包装在一个div 中。

  $stateProvider.state({
    name: 'parent',
    url: '/parent',
    template: '<downgraded-comp><div><ui-view></ui-view></div></downgraded-comp>',
  })

我偶然发现了一个解决方案，但不确定它究竟为什么会起作用。我想知道这是否是 dom 元素被@angular/upgrade 库替换的结果。