在我的主要路线中,我的配置文件模块延迟加载/配置文件,如下所示：
{
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：空不应该做任何事情.
你可以说 ：
router-outlet + .loading .spinner {
opacity: 1;
z-index: 100;
}
