單擊導航欄後停止組件重新加載

我在Angular 2中有一個導航欄。它的工作原理如下。單擊導航欄後停止組件重新加載

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">App</a> 
    <div class="collapse navbar-collapse" id="navbarNav"> 
    <ul class="navbar-nav"> 
     <li class="nav-item"> 
     <a routerLink="/dashboard" routerLinkActive="active" class="nav-link">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a routerLink="/grid" routerLinkActive="active" class="nav-link" >Grid</a> 
     </li> 
     <li class="nav-item"> 
     <a routerLink="/reporting" routerLinkActive="active" class="nav-link" >Reporting</a> 
     </li> 
    </ul> 
    </div> 
</nav>

而每個標籤加載1個組件。所以儀表板加載DashboardComponent並且網格加載一個GridComponent。

上述兩個組件都從data.service.ts中獲取數據。我的問題：是否有方法可以點擊儀表板（3秒後加載），然後從儀表板選項卡導航到網格選項卡。然後，當我回到儀表板選項卡時，是否不能重新加載並再次持續3秒？

我們在Angular 1.5中編寫的應用程序沒有上述問題。問題是如果用戶在儀表板和網格之間切換，則需要很長時間。

我看着這裏提出以下問題： Bootstrap's tabs with data-toggle cause reload in angularjs

Angular2 router.navigate refresh page

他們都沒有解決我的問題。第一個問題是角1和第二個問題，當我將我的導航項放入type =「button」時，重新加載仍然在進行。

來源

2017-06-21 Angela Pan

加載時間是不是issue.Because數據集是比較大的。問題是伍引導解決 - >標籤 - > destroyOnHide設置爲false。

https://ng-bootstrap.github.io/#/components/tabs

當你需要的組件更新數據，使用ngOnChanges

來源

2017-06-22 15:34:31

我懷疑你的分量了那麼久才重裝的原因是因爲它們依賴於獲取數據，並採取幾秒鐘這樣做的服務。如果您的組件在初始化時通過http請求異步獲取數據，則每次創建組件並向用戶顯示時，該請求都會觸發。

的解決方案是創建爲您服務緩存。一旦你的服務獲取它需要的數據，它應該將它作爲一個變量緩存。然後，當服務被要求發出相同的請求時，它可以檢查它是否已經有結果並返回結果，而不是再次發出完整的http請求。

如果您的緩慢組件負載是由於緩存問題，這些答案可能有所幫助： caching results with angular2 http service。

而且，這裏的服務，我剛寫的一個例子緩存其對將來的請求結果：

import { Injectable } from "@angular/core"; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class RhymeService { 

    constructor(private http: Http) { } 

    cachedData: any = {}; 

    search(term: string): Observable<string[]> { 
     if (term in this.cachedData) { 
      return Observable.of(this.cachedData[term]); 
     } 

     let rhymeUrl = `https://api.datamuse.com/words?rel_rhy=${term}`; 

     return this.http.get(rhymeUrl).map(response => { 
      let words = response.json().map((rhyme) => { 
       return rhyme.word; 
      }); 
      this.cachedData[term] = words; 
      return <string[]>words; 
     }); 
    } 
}

注意，這會阻止你的應用程序從一個組件重載加載新數據，除非你處理更新不時緩存。

來源

2017-06-21 21:45:14 SpaceFozzy

單擊導航欄後停止組件重新加載

回答

相關問題