Маршрутизатор Angular7 обновляет весь экран

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>

приложение-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

Не следует использовать 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

Другим решением было бы изменить стратегию маршрутизации на Hash.Это может быть достигнуто установкой useHash в true.RouterModule.forRoot(routes, {useHash: true}) Тогда ваша ссылка на панель будет похожа на localhost:4040/#/dashboard и не обновит вкладку вашего браузера.

Очевидно, что это не лучшее решение, чем другие, упомянутые выше, но оно подходит для вашего случая.

Answer 3

это должно это исправить:

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