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

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 秒时间吗？？

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

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

他们都没有解决我的问题。第一个问题是关于 angular 1. 第二个问题，当我将导航项设置为 type="button" 时，重新加载仍在进行。

Answer 1

我怀疑您的组件重新加载需要这么长时间的原因是因为它们依赖于获取数据并需要几秒钟才能完成的服务。如果您的组件在初始化时通过 http 请求从服务异步获取数据，则每次创建组件并向用户显示时都会触发该请求。

解决方法是为您的服务创建一个缓存。一旦你的服务获取了它需要的数据，它应该将它缓存为一个变量。然后，当服务被要求发出相同的请求时，它可以检查是否已经有结果并传回该结果，而不是再次发出完整的 http 请求。

如果您的组件加载缓慢是因为缓存问题，这些答案可能会有所帮助： .

此外，这是我刚刚编写的服务示例，它缓存其结果以供将来请求使用：

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

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

Answer 2

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

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

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

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

Stop component reload after navbar is clicked

angular2-routing

angular