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>',
  })

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

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

状态和模板定义

州事件日志

1 个答案: