单击导航栏后停止组件重新加载(Stop component reload after navbar is clicked)

 我在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选项卡会导致在angularjs中重新加载 
 
 Angular2 router.navigate刷新页面 
 
 他们都没有解决我的问题。 第一个问题是针对角度1.第二个问题，当我将导航项目设置为type =“button”时，重新加载仍在进行中。 

I have a Navigation bar in Angular 2. It works like below. 
 
<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>
 
And each tab loads 1 component. So dashboard loads DashboardComponent and grid loads a GridComponent. 
 
Both component mentioned above gets data from a data.service.ts. My question: is there a way to click on dashboard (it loads after 3 seconds), and then navigate away from dashboard tab to the grid tab. Then when I go back to the dashboard tab, can it not reload and take the 3 seconds time again?? 
 
The app we wrote in Angular 1.5 doesn't have the above problem. The issue is if the user is switching between dashboard and grid, it takes a lot of time. 
 
I looked at the following questions asked here: Bootstrap's tabs with data-toggle cause reload in angularjs
 
Angular2 router.navigate refresh page
 
They both don't solve my problem. first question is for angular 1. and the second question, when I make my nav items into type="button", the reloading is still happening. 

原文：https://stackoverflow.com/questions/44685050