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