Stop reloading component after clicking navigation button
I have a navigation bar in Angular 2. It works as shown below.
<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>
And each tab loads 1 component. So the dashboard loads the DashboardComponent and the grid loads the GridComponent.
Both of the above components get data from data.service.ts. My question is, is there a way to click on the toolbar (it loads after 3 seconds) and then go from the dashboard tab to the grid tab. Then when I go back to the dashboard tab, can't it restart and take 3 seconds again?
The application we wrote in Angular 1.5 does not have this problem. The problem is the user is switching between the dashboard and the grid, it takes a long time.
I have covered the following questions asked here: Bootstrap bookmarks with data toggling cause reload in angularjs
Angular2 router.navigate update page
Both of them don't solve my problem. first question for Angular 1. And second question, when I make my navs in type = "button", the reload still happens.
source to share
Load times weren't an issue. Because the dataset is relatively large. Problem solved with Ng Bootstrap -> tabs -> destroyOnHide set to false.
https://ng-bootstrap.github.io/#/components/tabs
When you need to update data for a component, use ngOnChanges
source to share
I suspect why your components take so long to reload is because they depend on services to fetch data and take a few seconds to do so. If your components receive data asynchronously from the service via an HTTP request upon initialization, this request will fire every time the component is created and displayed to the user.
The solution to this is to create a cache for your service. Once your service receives the data it needs, it should cache it as a variable. Then, when the service is prompted to make the same request, it can check if it already has a result and pass that result instead of repeating the full http request.
If your slow component loading is related to a caching issue, these answers might help: cache the results with the angular2 http service .
Also, here's an example of a service I just wrote that caches its result for future requests:
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;
});
}
}
Note that this will prevent your application from loading new data into a component reload if you don't process the cache from time to time.
source to share