Trong các tuyến đường chính của tôi, tôi có mô-đun hồ sơ của tôi lười biếng nạp vào /profile
như vậy:Hiển thị tải hình động trong khi tải mô-đun lười biếng?
{
path: '',
component: HomeComponent
},
{
path: 'profile', loadChildren: './profile/profile.module#ProfileModule'
},
{
path: '**',
redirectTo: '',
pathMatch: 'full'
}
Tuy nhiên, mô-đun hồ sơ của tôi phải mất ~ 1,5-2 giây để tải mà là khá chậm. Tôi muốn hiển thị một số loại hoạt hình tải trong khi mô-đun của tôi tải, là có anyway để làm như vậy? Tôi đã cố gắng làm điều này:
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>
và bên trong css của tôi, tôi đã có:
/* 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 */
Nhưng điều này dường như không làm việc, Có anyway để hiển thị một số bộ nạp trong khi các mô đun angular2 được tải?
đánh giá cao câu trả lời, tuy nhiên tôi không thể nhận được bất kỳ loại tải làm việc bằng cách sử dụng '.loader' và' .spinner' –
@SyntacticFructose, tôi cập nhật câu trả lời của tôi, nhưng nói chung , trước tiên bạn phải đảm bảo hoạt ảnh của mình hoạt động và sau đó cố gắng tích hợp nó với công cụ định tuyến – Milad