Angular7 路由器正在刷新整个屏幕

Question

Angular7 路由器在路由更改时刷新整个页面。从 app.component.html 我尝试直接在这个页面上设置路由器插座，并将其包装在 app.component.html[= 上的另一个控制器中29=] 页。无论每次路线更改时使用哪个选项，都会重新加载整个屏幕。我只希望路由器插座区域重新加载。我以前在路由方面从未遇到过这个问题。

来自 app.component.html 我已经尝试将路由器插座直接放在此页面上，并将其包装在 [= 上的另一个控制器中35=] 页。无论每次路线更改时使用哪个选项，都会重新加载整个屏幕。

<!--Header Component-->
<app-header></app-header>
<div class="container-fluid" style="height:100%;">
  <div class="row" style="height:100%">
    <div class="col-2 sideNavContainer">
      <!--Side Nav Component-->
      <app-side-nav></app-side-nav>
    </div>
    <div class="col-10 main-container">
      <!--<div class="container-fluid">-->
      <div class="row dark-blue-bar" style="width: 100%;">
        <!--Tab Bar Component-->
        <app-tab-bar style="width: 100%"></app-tab-bar>
      </div>
      <div class="row" style="padding-left: 10px; margin-left: 0px">
        <!--Main Content Component-->
        <router-outlet></router-outlet>
      </div>
      <!--</div>-->
    </div>
  </div>
</div>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DashboardComponent } from './core/dashboard/dashboard.component';
import { CodeSetOverviewComponent} from './core/code-set-overview/code-set-overview.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent},
  { path: 'codeSetOverview', component: CodeSetOverviewComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

侧导航LINK示例

<ul class="nav flex-column side-nav">
    <li class="nav-item">
      <a class="nav-link active" href="dashboard" rel="no-refresh"><i class="fas fa-columns" style="color:white; padding-right: 10px"></i>DASHBOARD</a>
    </li>

路由变化时，只刷新路由器出口部分，不刷新整个页面。

Answer 1

您不应在 Angular 模板中使用 href 以便在不重新加载的情况下导航。

你应该使用routerLink

示例：

<a class="nav-link active" [routerLink]="['/dashboard']" rel="no-refresh"><i class="fas fa-columns" style="color:white; padding-right: 10px"></i>DASHBOARD</a>

Answer 2

这应该可以解决它：

 <li class="nav-item">
      <a [routerLink]='dashboard'>DASHBOARD
 </li>

Answer 3

另一种解决方案是将您的路由策略更改为哈希。这可以通过将 useHash 设置为 true 来实现。 RouterModule.forRoot(routes, {useHash: true}) 那么您的仪表板 link 会像 localhost:4040/#/dashboard 并且不会刷新浏览器的选项卡。

显然，它并不比上面提到的其他解决方案更好，但它适合您的情况。