Parent component getting re-initialised when navigating to child component

Question

Please help me.
I have problem with second router for children
My routes:

const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'login'},
  {
    path: 'web', component: WebComponent,
    children: [
      {path: 'about', component: AboutComponent},
      {path: 'skills', component: SkillsComponent},
    ]
  }
]

AboutComponent is without module.
In WebComponent I have button:

<nav>
    <button [routerLink]="'/web/about'" (click)="clickButton()" [ngClass]="{animationStart: anim > 4}">About me</button>
</nav>
<div class="root">
    <router-outlet></router-outlet>
</div>

When I click this button, I have some problem. The ngOnInit in WebComponent restart. Why? I don't want this, because also the animation is running again. Please help me.

GitHub: https://github.com/ZakuroPL/webCV/tree/main/src/app

Answer 1

I am not sure why is it refreshing whole web component, but what I know, if you have children routes, you don't have to call them like [routerLink]="'/web/about'", it would be enough to use about only and normally, you should provide to router link an array, so maybe that is actually refreshing your page

Try it like this [routerLink]="['about']" and see what is going to happen