Stop Komponente neu laden, nachdem Navbar geklickt wurde

Question

Ich habe eine Navigationsleiste in Angular 2. Es funktioniert wie unten.

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

und jede Registerkarte Lasten 1-Komponente. Das Dashboard lädt also DashboardComponent und das Grid lädt eine GridComponent.

Die beiden oben genannten Komponenten erhalten Daten von einem data.service.ts. Meine Frage: Gibt es eine Möglichkeit, auf das Dashboard zu klicken (es wird nach 3 Sekunden geladen) und navigieren Sie dann von der Dashboard-Registerkarte zur Registerkarte "Grid". Dann, wenn ich zurück zum Dashboard-Tab gehe, kann es nicht neu laden und die 3 Sekunden wieder nehmen ??

Die App, die wir in Angular 1.5 geschrieben haben, hat das obige Problem nicht. Das Problem ist, wenn der Benutzer zwischen Dashboard und Grid wechselt, es braucht viel Zeit.

schaute ich auf folgende Fragen hier gestellt: Bootstrap's tabs with data-toggle cause reload in angularjs

Angular2 router.navigate refresh page

Sie beide nicht mein Problem lösen. Die erste Frage ist für Winkel 1. und die zweite Frage, wenn ich meine Nav-Elemente in Typ = "Knopf" machen, ist das Nachladen immer noch passiert.

Answer 1

Ladezeit war nicht das Problem. Weil Datensatz relativ groß ist. Problem wird gelöst durch Ng Bootstrap -> Tabs -> destroyOnHide auf false gesetzt.

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

Wenn benötigen Sie Daten für die Komponente zu aktualisieren, verwenden Sie ngOnChanges

Answer 2

Ich vermute, der Grund, warum Ihre Komponenten so lange brauchen, um neu zu laden, ist, weil sie von Diensten abhängen, die Daten abrufen und ein paar Sekunden brauchen, um dies zu tun. Wenn Ihre Komponenten Daten über eine HTTP-Anforderung bei der Initialisierung asynchron von einem Dienst erhalten, wird diese Anforderung jedes Mal ausgelöst, wenn die Komponente erstellt und dem Benutzer angezeigt wird.

Die Lösung hierfür ist, einen Cache für Ihren Service zu erstellen. Sobald Ihr Dienst die Daten abgerufen hat, die er benötigt, sollte er als Variable zwischengespeichert werden. Wenn der Dienst dann aufgefordert wird, dieselbe Anforderung zu stellen, kann er überprüfen, ob er bereits ein Ergebnis hat, und dieses Ergebnis zurückgeben, anstatt die vollständige http-Anforderung erneut zu stellen.

Wenn Ihre langsame Komponentenlast aufgrund eines Caching-Problems auftritt, können diese Antworten hilfreich sein: caching results with angular2 http service.

Auch hier ist ein Beispiel für einen Service, den ich gerade geschrieben habe, dass sein Ergebnis für zukünftige Anfragen-Caches:

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

Beachten Sie, dass diese App von Laden neuer Daten auf einer Komponente reload verhindern wird, wenn Sie die Aktualisierung behandeln Cache von Zeit zu Zeit.