typescript - Enrutamiento de Angular: cambio selectivo de outlets nombrados o no recargar submódulo

Tengo la siguiente configuración de enrutamiento. Funciona como se espera, pero no quiero recargar el ListComponent de Module2 en cada evento de enrutamiento. Si el usuario hace clic en un elemento de la lista en ListComponent, no debería recargar la lista en sí.

Por ejemplo, si estoy en module2/route1 y navego a module2/route2, me gustaría que solo se actualice el outlet de details y no el de list.

Mi primer pensamiento fue cambiar <router-outlet name="list"></router-outlet> a <app-list-component></app-list-component>, pero de esta manera el componente de la lista se recarga todo el tiempo, igual que cuando era manejado por el router. Supongo que esto se debe a que el enrutamiento de la aplicación recarga todo de nuevo. ¿Cómo puedo evitar esto?

app.component.html

  <router-outlet></router-outlet>

app-routing.module.ts

  const routes: Routes = [
  {
    path: 'module1',
    loadChildren: () =>
      import('./module1/module1.module').then(
        (m) => m.Module1Module
      ),
  },
  {
    path: 'module2',
    loadChildren: () =>
      import('./module2/module2.module').then(
        (m) => m.Module2Module
      ),
  },

module2.component.html

  <router-outlet name="list"></router-outlet>
  <router-outlet name="details"></router-outlet>

module2-routing.module.ts

const routes: Routes = [
  {
    path: `route1`,
    component: Module2Component,
    children:
    [
      {
        path: '',
        outlet: 'list',
        component: ListComponent,
      },
      {
        path: '',
        outlet: 'details',
        component: Main1Component
      }
    ],
  },
  {
    path: `route2`,
    component: Module2Component,
    children:
    [
      {
        path: '',
        outlet: 'list',
        component: ListComponent,
      },
      {
        path: '',
        outlet: 'details',
        component: Main2Component
      }
    ],
  },
  {
    path: '',
    component: Module2Component,
    children:
    [
      {
        path: '',
        outlet: 'list',
        component: ListComponent,
      }
    ],
  },

Respuesta #1

ya has duplicado el componente para diferentes rutas, te sugeriría que tuvieras un único componente de lista registrado y usaras el componente de detalles como un componente hijo de la lista o como hijos del componente de lista, por ejemplo:

 const routes: Routes = [
  {
    path: `list`,
    component: ListComponent,
    children:
    [
      {
        path: '',
        outlet: 'details',
        component: Main1Component,
      },
      {
        path: '',
        outlet: 'details2',
        component: Main2Component,
      }
    ],
  }]

Respuesta #2

Por favor, usa este estilo de enrutamiento, donde tenemos un padre con cadena vacía, que contiene el componente de lista, luego re-renderizaremos las rutas hijas que solo se refrescan y el componente de lista no se refresca.

Enrutamiento

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Module2Component } from './module2/module2.component';
import { Main2Component } from './main2/main2.component';
import { Main1Component } from './main1/main1.component';

const routes: Routes = [
  {
    path: ``,
    component: Module2Component,
    children: [
      {
        path: 'route1',
        component: Main1Component,
      },
      {
        path: 'route2',
        component: Main2Component,
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class Module2RoutingModule {}

Componente del Módulo2

<app-list />
<router-outlet></router-outlet>

Demostración de Stackblitz