Angular child routes reload parent component

Question

I'm going to give a lot of background (maybe unnecessary) because I don't really know how to ask this question.

I have an Angular asset tracking application with routing that has some parent routes and several child routes. The child routes all specify the parent component and activate different components within that component (see code).

The parent component generates a tree with several router links to the detail pages of the various assets grouped by location and type and the user navigates through this tree to select an asset. However, when the router link is activated, it reloads the parent component, and subsequently the tree, and now the user is left at the starting point and has to open the tree all over again.

I'm trying to determine if I've architected the component relationships wrong or if I'm coming at this workflow from the wrong angle all together.

Essentially, what I am trying to make happen is the tree structure remains in-tact while the user navigates to different places within the parent component. Regardless if it's the details page, dashboard, etc.

How can I prevent the parent component from being reloaded every time a child router link is activated and deactivated?

app-routing.module.ts code:

{
    path: 'assets',
    canActivate: [ AuthGuard],
    children: [
         {
            path: '',
            component: AssetsComponent,
         },
         {
            path: 'details/:asset',
            component: AssetsComponent
         },
    ]
},

asset.component.ts code:

<div>
    <div class="select-pane">
        ... 
        <div class="asset-list-item lvl-3" routerLink="/assets/details/{{ assetList?.hostname }}" routerLinkActive="selected">{{ assetList?.hostname }}</div>
        ... 
    </div>
</div>
<div class="dialog-pane">
    <app-asset-dashboard *ngIf="!currentAsset"></app-asset-dashboard>
    <app-asset-detail *ngIf="currentAsset" [asset]="currentAsset"> 

Answer 1

Because AssetComponent is handling both '' and /details routes, when you navigate to /details, the component is loading again with the tree reset. I suggest, you structure the app this way:

Also, I think you need pathMatch:full in the '' route, but I'm entirely sure if this solves anything.

{
    path: 'assets',
    component: AssetsComponent,
    canActivate: [ 
    AuthGuard
    ],
    children: [
    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full',
    },
    {
        path: 'dashboard',
        component: AssetDashboardComponent,
    },
    {
        path: 'details/:asset',
        component: AssetDetailComponent,
    },
    ]
},

AssetComponent Template should look something like:

<div>existing component template that has tree</div>
<router-outlet></router-outlet>

AssetDetailsComponent Template should look like:

<div>Asset details are moved here </div>

The respective component classes for each of the component will have the data and functions moved in them.