6
在我的主要途径我上装载有/profile
我的个人资料模块懒惰像这样:模块延迟加载时显示加载动画?
{
path: '',
component: HomeComponent
},
{
path: 'profile', loadChildren: './profile/profile.module#ProfileModule'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
然而,我的配置模块需要1.5〜 - 2秒加载的速度很慢。我想在模块加载时显示某种加载动画,是否有反应?我试着这样做:
app.component.html
<!-- other stuff ... -->
<router-outlet></router-outlet>
<div class="loading">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
和我的CSS里面,我有:
/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
opacity: 0;
transition: opacity .8s ease-in-out;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #1B1B1B;
color: white;
z-index: -1;
}
/* .loading screen is visible when app is not bootstraped yet, .my-app is empty */
router-outlet:empty + .loading,
router-outlet:empty + .spinner {
opacity: 1;
z-index: 100;
}
/* spinner animation css stuff */
但这似乎并没有工作,反正是有在angular2模块加载时显示一些加载程序?
欣赏的答案,但我不能让任何使用'.loader'排序工作载荷和'.spinner' –
@SyntacticFructose,我更新了我的答案,但一般,你应该首先确保你的动画正在工作,然后尝试将它与路由器的东西进行整合 – Milad