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

【问题标题】：Angular7 router is refreshing entire screenAngular7路由器正在刷新整个屏幕
【发布时间】：2019-04-08 15:45:27
【问题描述】：

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>

当路由改变时，只刷新router-outlet部分而不是整个页面。

【问题讨论】：

您如何更改页面？ <app-side-nav> 是怎么回事？
能分享一下routing.module.ts文件吗？
更新了路由和导航信息，我认为是 a href 链接导致了这种情况，但不知道如何让它停止
您必须使用 routerLink，而不是 href。 href 表示：请重新加载页面。 angular.io/guide/router
你不应该使用href来导航而不重新加载。

标签： angular angular-router

【解决方案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>

【讨论】：

【解决方案2】：

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

显然，这不是比上述其他解决方案更好的解决方案，但它适合您的情况。

【讨论】：

【解决方案3】：

这应该可以解决它：

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

【讨论】：

谢谢大家，在用 routerLink 关闭 href 后它现在可以工作了