मॉड्यूल आलसी भार के दौरान एनीमेशन लोडिंग दिखा रहा है?

Question

मेरी मुख्य मार्गों में मैं अपनी प्रोफ़ाइल मॉड्यूल आलसी तो जैसे /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> 

और मेरे सीएसएस के अंदर, मैं था:

/* 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 */ 

लेकिन यह काम करने के लिए प्रतीत नहीं होता है, वहाँ वैसे भी है कोणीय 2 मॉड्यूल लोड होने पर कुछ लोडर दिखाने के लिए?

Answer 1

राउटर-आउटलेट अपने अंदर सामान नहीं लगाएगा, यह इसे इसके आगे रखेगा।

जब यह खाली है:

<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; 
    }