在我的主要路线中,我在/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模块时显示一些加载器?
答案 0 :(得分:2)
router-outlet不会把东西放在里面,它会把它放在旁边。
当它为空时:
<router-outlet></router-outlet>
所以,当它被加载时,它将是:
<router-outlet></router-outlet>
<your-code></your-code> // which is loaded afterward
所以 router-outlet:空 不应该做任何事情。
你可以说:
router-outlet + .loading .spinner {
opacity: 1;
z-index: 100;
}