Реализация стратегии предварительной нагрузки -
...
const routes: Routes = [
{
path: 'welcome',
component: 'WelcomeComponent'
},
{
path: 'home',
canActivate: [AuthGuard],
data: { preload: true },
loadChildren: '@app/post-login/post-login.module#PostLoginModule'
},
{ path: '', redirectTo: '/welcome', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
...
...
RouterModule.forRoot(routes, { preloadingStrategy: SelectiveStrategy })
...
В приведенном выше коде мы лениво загружаем PostLoginModule в / home путь. Также мы реализуем собственную стратегию предварительной загрузки. (Аналогично тому, что в угловой направляющей).
Реализация SelectiveStrategy -
...
@Injectable()
export class SelectiveStrategy implements PreloadingStrategy {
preload(route: Route, load: Function): Observable<any> {
if (route.data && route.data['preload']) {
return load();
}
return of(null);
}
}
В SelectiveStrategy мы проверяем route.data.preload
. Если установлено значение true, тогда мы вызываем load()
. Остальное возвращение of(null)
.
В приведенной выше реализации загружен ли PostLoginModule при начальной загрузке страницы? Или он загружается через некоторое время после начальной загрузки страницы асинхронно в фоновом режиме?
Угловая направляющая не очень ясна по этому вопросу. Я видел несколько блогов, в которых говорилось, что он будет асинхронно загружаться в фоновом режиме после начальной загрузки страницы. Но упоминается ли это где-нибудь в угловой документации?