У меня есть большое приложение, которое я решил разделить на несколько лениво загруженных модулей. Хотя это работало для «меньших» модулей, для более крупных я обнаружил, что иногда / в большинстве случаев представления, связанные с этими модулями, не запускаются с обнаружением изменения углов, как будто ничего не изменилось.
Само приложение довольно большое, поэтому, если подвести итог, выложу «фрагмент кода ниже». Изменения, которые происходят от логического уровня, такие как ожидание завершения служб и отображение результатов в шаблоне, но не обновление.
Странная часть в том, что, когда я нажимаю клавишу на клавиатуре, она возобновляется или вызывает ручное обнаружение с помощью ChangeDetectorRef
markForCheck
. Такое поведение происходит случайным образом, и в основном для больших ленивых загруженных модулей.
У кого-нибудь были какие-либо проблемы с лениво загруженными модулями, это первый раз, когда я использую этот подход, и, возможно, я что-то упускаю, любая помощь очень ценится. Шаблон использовал его обычный, с подписками на уровне ngOnInit
, ничего особенного в этом нет. Сервисы вызываются, я проверял это несколько раз, но проблема в том, что данные, представленные в представлении, не обновляются. Этот точный компонент работал отлично, пока не превратился в лениво загруженный модуль.
Ленивый загруженный модуль:
@NgModule({
imports: [
...multiple modules
RouterModule.forChild(homeRoutes),
],
providers: [...multiple services],
declarations: [HomeComponent]
})
export class HomeModule {
}
Родитель, где этот модуль вызывается (который вызывается в appModule)
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpClientModule,
MatTooltipModule,
AppRoutingModule,
BrowserAnimationsModule,
RouterModule.forChild(mainRoutes),
ToolsModule,
BMWTranslateModule,
ModalModule,
],
providers: [HttpClient, MainServiceState, AppState, RouterService, ...etc],
declarations: [MainComponent, NavbarComponent],
exports: [MainComponent]
})
export class MainModule {
}
и связанный с ним маршрутизатор:
export const mainRoutes: Routes = [
{
path: 'home',
loadChildren: './../home/#HomeModule'
},
{...other lazy loaded modules}]