ナビゲーションバーをクリックした後コンポーネントを再ロードしない

Question

ナビゲーションバーが角度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です.2番目の質問は、ナビゲーション項目をtype = "button"にすると、リロードはまだ起こっています。

Answer 1

ローディング時間は問題ではありませんでした。データセットが比較的大きいためです。問題は、Ng Bootstrap - > tabs - > destroyOnHideをfalseに設定することで解決されます。

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

あなたがコンポーネントのデータを更新する必要があり、ngOnChanges

を使用

Answer 2

コンポーネントのリロードに時間がかかる理由は、データを取得するサービスに依存し、そのために数秒かかるためです。コンポーネントが初期化時に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; 
     }); 
    } 
} 

注：

はまた、ここで私は将来の要求のためにその結果をキャッシュすることを書いたサービスの一例です時々キャッシュします。