单击导航栏后停止组件重新加载

问题描述：

我在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”时，重新加载仍然在进行。

答

加载时间是不是issue.Because数据集是比较大的。问题是伍引导解决 - >标签 - > destroyOnHide设置为false。

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

当你需要的组件更新数据，使用ngOnChanges

答

我怀疑你的分量了那么久才重装的原因是因为它们依赖于获取数据，并采取几秒钟这样做的服务。如果您的组件在初始化时通过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; 
     }); 
    } 
}

注意，这会阻止你的应用程序从一个组件重载加载新数据，除非你处理更新不时缓存。

单击导航栏后停止组件重新加载

相关推荐