Angular 不需要的重新加载页面

Question

When i click on a routerLink, it goes to the link page with full page reload (aka parent component refresh)

I tried making a 2nd app-routing.module like in this example: https://angular.io/guide/router-tutorial-toh But it didnt reslove the problem. Using router-outlet names neither. Im running out of idees

My routes are like:

const routes: Routes = [
  {
    path: 'account',
    component: StandardLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'schools', component: SchoolsComponent },
      {
        path: 'contacts',
        component: ContactsComponent,
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
      },
    ],
  },
  {
    path: ':schoolSlug',
    component: RegistrationLayoutComponent,
    children: [
      {
        path: 'login',
        component: LoginComponent,
      },
      {
        path: 'forgot_password',
        component: ForgotPasswordComponent,
      }
    ],
  },
  { path: '**', redirectTo: 'account/dashboard', pathMatch: 'full' },
];

The sidenav comonent html:

<div
  class="d-flex flex-row mb-3 pointer lightHover"
  [routerLink]="['dashboard']"
>
  <div class="align-self-center col-md-3 pr-0 text-center">
    <img src="/assets/img/icons/squares.svg" />
  </div>
  <div class="col-md-9">
    <h6 class="font-weight-bold text-gray-dark mb-1 pt-3">
      {{ "MENU.ANALYSE.TITLE" | translate }}
    </h6>
    <p class="sidenav-txt pb-3">
      {{ "MENU.ANALYSE.DESCRIPTION" | translate }}
    </p>
  </div>
</div>
<div
  class="d-flex flex-row mb-3 pointer lightHover"
  [routerLink]="['contacts']"
>
  <div class="align-self-center col-md-3 display-5 pr-0 text-center">
    <img src="/assets/img/icons/user.svg" />
  </div>
  <div class="col-md-9">
    <h6 class="font-weight-bold text-gray-dark mb-1 pt-3">
      {{ "MENU.CONTACTS.TITLE" | translate }}
    </h6>
    <p class="sidenav-txt pb-3">
      {{ "MENU.CONTACTS.DESCRIPTION" | translate }}
    </p>
  </div>
</div>

I have one router-outlet in app.component and one in standardLayoutComponent (in which i also call header and sidenav) For example when i click on routerlink from '/account/dashboard' to '/account/contacts', the standardLayoutComponent refresh (with header and sidenav) instead of only refreshing DashboardComponents

Thanks for the help (using latest version of angular)

Answer 1

Ok i finaly resolved this. I went through dumping my components to see if the problem was from them.
And it was this line of code:

constructor (
   ...
){
 this.router.routeReuseStrategy.shouldReuseRoute = function () {

      return false;

    };
}