首页 文章

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

提问于
浏览 次
3

我在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

2 回答

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

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

    回复于
  • 1

    加载时间不是问题 . 因为数据集相对较大 . 问题通过Ng Bootstrap - > tabs - > destroyOnHide设置为false来解决 .

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

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

    回复于

相关问题