Angular 7-在更改路线之前加载图像

Question

我目前正在从事投资组合。我的意图是仅在该特定路径上的图像完全加载后才更改路径（“组合”及其子路径“全部”立即显示）。当单击该路线时，将显示“角度材料”中的进度条。

由于我是angular的初学者，因此我无法提供任何代码，但是我的应用程序路由模块。

浏览互联网时，我发现了一个类似的问题，但我并不十分了解：

  

https://forum.vuejs.org/t/load-images-before-changing-route/11479

应用程序路由模块：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component:  AboutComponent},
  { path: 'portfolio', component:  PortfolioComponent, children: [
      { path: '', redirectTo: 'all', pathMatch: 'full'},
      { path: 'all', component: AllComponent},
      { path: 'wedding', component: PortfolioweddingComponent},
      { path: 'adventure', component: PortfolioadventureComponent},
    ]},
  { path: 'book-me', component:  BookMeComponent},
  { path: 'book-me/wedding', component:  WeddingComponent},
  { path: 'book-me/adventuresession', component: AdventuresessionComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'}), RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }