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

Question

我有一个 hybrid/lazy-loaded Angular/AngularJS 应用程序，它使用新的 Angular 路由器和 ui-router version 0.4.2 with parallel outlets/views。为了实现这一点，我遵循了 Victor Savkin's Lazy Loaded AngularJS guide 通常，它运行良好，我可以在 Angular 路由和 AngularJS 路由之间切换。但是，我运行遇到了 ui- 页面首次打开时未显示路由器子视图的问题。

此问题仅在尝试在启动时加载子状态时影响状态。在路线之间导航不会遇到同样的问题。 我还确定它仅在父状态模板被降级的 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 库替换的结果。

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

Ui-router child state not loading inside downgraded Angular component

angular-ui-router

angular-upgrade

状态和模板定义

状态事件日志