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

【问题标题】：Stop component reload after navbar is clicked单击导航栏后停止组件重新加载
【发布时间】：2017-11-24 21:16:03
【问题描述】：

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

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

我怀疑您的组件需要很长时间才能重新加载的原因是因为它们依赖于获取数据的服务并且需要几秒钟才能完成。如果您的组件在初始化时通过 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;
        });
    }
}

请注意，除非您不时更新缓存，否则这将阻止您的应用在组件重新加载时加载新数据。

【讨论】：

【解决方案2】：

加载时间不是问题。因为数据集比较大。 Ng Bootstrap -> tabs -> destroyOnHide 设置为 false 解决了问题。

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

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

【讨论】：