У меня есть приложение Angular / AngularJS с гибридной / ленивой загрузкой, которое использует как новый маршрутизатор Angular, так и ui-router версии 0.4.2 с параллельными выходами / представлениями. Для этого я следил за Виктором Савкиным 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>, из-за которого пользовательский интерфейс не отображается правильно, и что я могу сделать, чтобы исправить эту проблему?
