模块延迟加载时显示加载动画?
问题描述:
在我的主要途径我上装载有/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模块加载时显示一些加载程序?
答
router-outlet不会把东西放在里面,它会把它放在它旁边。
当它是空的:
<router-outlet></router-outlet>
所以,当它的加载,这将是:
<router-outlet></router-outlet>
<your-code></your-code> // which is loaded afterward
所以路由器出口:空不应该做任何事情。
你可以说:
router-outlet + .loading .spinner {
opacity: 1;
z-index: 100;
}
欣赏的答案,但我不能让任何使用'.loader'排序工作载荷和'.spinner' –
@SyntacticFructose,我更新了我的答案,但一般,你应该首先确保你的动画正在工作,然后尝试将它与路由器的东西进行整合 – Milad