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

Question

我在 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 个组件。所以 dashboard 加载 DashboardComponent 而 grid 加载一个 GridComponent。

上面提到的两个组件都从 data.service.ts 中获取数据。我的问题:有没有办法点击仪表板(3 秒后加载)，然后从仪表板选项卡导航到网格选项卡。然后当我回到仪表板选项卡时，它不能重新加载并再次花费 3 秒时间吗？？

我们用Angular 1.5写的app没有上述问题。问题是如果用户在仪表板和网格之间切换，会花费很多时间。

我查看了此处提出的以下问题: Bootstrap's tabs with data-toggle cause reload in angularjs

Angular2 router.navigate refresh page

它们都不能解决我的问题。第一个问题是 Angular 1。第二个问题是，当我将导航项设置为 type="button"时，重新加载仍在进行。

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

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