Angular 4正確顯示加載屏幕

Question

我正在使用Angular 4，並且我希望在路由導航之間顯示加載屏幕（基本微調）。 我已經使用this技術來訂閱正確的事件，並使用style.visibility爲了顯示/隱藏我的微調。

出於某種原因，雖然我正確地檢測到導航的開始和結束事件，但我的微調不會顯示。實際上，儘管能見度字段是正確更改，但微調器仍不會顯示。

我設法顯示它的唯一方法是迫使它在任何時候都被設置爲'可見'而不是'隱藏'。

附上我的代碼的相關章節：

app.component.ts：

constructor (private utils: UtilsService, private router: Router) { 
 
\t \t // Intercept all navigation events 
 
\t \t router.events.subscribe((event: RouterEvent) => { 
 
\t \t \t this.navigationInterceptor(event) 
 
\t \t }) 
 

 
\t \t // Calls our initializer 
 
\t \t utils.init(); 
 
\t } 
 

 
\t /* Intercept the navigator in order to display a loading screen */ 
 
\t navigationInterceptor(event: RouterEvent): void { 
 
\t \t // Starting the navigation 
 
\t \t if (event instanceof NavigationStart) { 
 
\t \t \t this.loading = true; 
 
\t \t } 
 

 
\t \t // The navigation ended 
 
\t \t if (event instanceof NavigationEnd) { 
 
\t \t \t this.loading = false; 
 
\t \t } 
 

 
\t \t // Set loading state to false in both of the below events to hide the spinner in case a request fails 
 
\t \t if (event instanceof NavigationCancel) { 
 
\t \t \t this.loading = false; 
 
\t \t } 
 
\t \t if (event instanceof NavigationError) { 
 
\t \t \t this.loading = false; 
 
\t \t } 
 

 
\t \t // Get our loading container 
 
\t \t var loading_container = document.getElementById('loader-container'); 
 

 
\t \t // If our loading container isn't available, this is the application first launch (ie. full refresh) 
 
\t \t // so we need to display a full loading logo 
 
\t \t if (loading_container) { 
 
\t \t \t // This is just a redirect, not a full refresh, so just hide or show the loading screen 
 
\t \t \t document.getElementById('loader-container').style.visibility = this.loading ? 'visible' : 'hidden'; 
 
\t \t } 
 
\t }

app.component.html：

<div style="position: fixed; left: 220px; width: calc(100% - 220px); height: 100%; z-index: 10000; background-color: rgba(255, 255, 255, 0.6);" id = "loader-container"> 
 
\t <div style = "top: 30%;" class="sk-spinner sk-spinner-double-bounce"> 
 
\t \t <div class="sk-double-bounce1"></div> 
 
\t \t <div class="sk-double-bounce2"></div> 
 
\t </div> 
 
</div> 
 
<!-- Main view/routes wrapper--> 
 
<router-outlet> 
 
</router-outlet>

Answer 1

我已經解決了這個問題。 問題是，在JS DOM更改只會在當前代碼執行完畢後纔會執行，因此會延遲我的微調控件的顯示/消失到代碼執行的最後。這顯然導致它根本沒有顯示，因爲代碼完成執行的那一刻顯然已經觸發了NavigationEnd事件。

我不知道這是否是正確的解決方案，由我結束了在我所有的導航鏈接使用onClick事件：

<a (click)="routeClick('/Home')"><i class="fa fa-th-large"></i> <span class="nav-label">Home</span></a>

，並建立了routeClick（）函數如下：

public routeClick(href : string) : void { 
 
    // Display the loading spinner 
 
    UtilsService.loading = true; 
 

 
    // Redirect to the new route asynchronously (IMPORTANT! Otherwise the spinner will not show!) 
 
    setTimeout('location.href = "#' + href + '";', 1); 
 
    }

其中導致所有DOM更改執行之前實際導航開始。

希望這會有所幫助！

Answer 2

問題是，您正嘗試在構造函數中使用Angular中的本地JavaScript，到那時DOM還沒有準備好。你應該在AfterViewInit中使用它。

在這種情況下，您可以擁有一個加載變量和所需的全部內容，根據導航使用它在模板中使用ngIf顯示和關閉微調器。

<div *ngIf = "loading" class = "main"> 
    <div class="spinner"> 
    <div class="rect1"></div> 
    <div class="rect2"></div> 
    <div class="rect3"></div> 
    <div class="rect4"></div> 
    <div class="rect5"></div> 
    </div> 

CSS

.spinner > div { 
    background-color: black; 
    height: 100%; 
    width: 6px; 
    display: inline-block; 

    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; 
    animation: sk-stretchdelay 1.2s infinite ease-in-out; 
} 

.spinner .rect2 { 
    -webkit-animation-delay: -1.1s; 
    animation-delay: -1.1s; 
} 

.spinner .rect3 { 
    -webkit-animation-delay: -1.0s; 
    animation-delay: -1.0s; 
} 

.spinner .rect4 { 
    -webkit-animation-delay: -0.9s; 
    animation-delay: -0.9s; 
} 

.spinner .rect5 { 
    -webkit-animation-delay: -0.8s; 
    animation-delay: -0.8s; 
} 

@-webkit-keyframes sk-stretchdelay { 
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
    20% { -webkit-transform: scaleY(1.0) } 
} 

@keyframes sk-stretchdelay { 
    0%, 40%, 100% { 
    transform: scaleY(0.4); 
    -webkit-transform: scaleY(0.4); 
    } 20% { 
     transform: scaleY(1.0); 
     -webkit-transform: scaleY(1.0); 
    } 
} 

工作示例link和混帳回購協議LINK