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

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

如果尝试在引导时加载子状态，则此问题仅影响状态 . 在路线之间导航不会遇到同样的问题 . I have also determined that it only occurs in routes when the parent state template is wrapped by a downgraded Ng2 component.

状态和模板定义

@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无法正确呈现，我该怎么做才能解决问题？