Question

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

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

<!--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 { }

侧面导航链接示例

<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}) 这样，您的信息中心链接将类似于localhost:4040/#/dashboard，并且不会刷新浏览器的标签。

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

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

3 个答案: