Маршрутизация одних и тех же компонентов с разными параметрами в приложении Angular

Question

У меня есть приложение Angular с тремя модулями, которые используют одни и те же компоненты с разными параметрами. Я использовал демарш ниже, я не думаю, что это хорошее решение, я использовал стратегию предварительной загрузки, но меня больше интересуют недублированные компоненты. Состояние каждого компонента не имеет значения.

в app-routing.module.ts

export const routes: Routes = [

  {
    path: 'module1',
    loadChildren: './modules/module1/module1.module#Module1'
  },

  {
    path: 'module2',
    loadChildren: './modules/module2/module2.module#Module2'
  },

  {
    path: 'module3',
    loadChildren: './modules/module3/module3.module#Module3'
  },

  {
    path: '**',
    redirectTo: '/module1',
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})

MODULE1

в module1 -routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: Module1Component1
    },
    {
        path: 'second',
        component: Module1Component2
    }
];

in Module1Component1

@Component({
    selector: 'app-module1-component1',
    template: ` <app-component1 [tabLink]="'AAA'" [columns] = "columns1"
     [displayedColumns] = "displayedColumnsA"> </app-component1> `

})

in Module1Component2

@Component({
    selector: 'app-module1-component2',
    template: ` <app-component2 [FormControl]="formControlA" 
    [tabLink]="'AAA'" [searchFields] = "searchFields1"> </app-component2> `

})

MODULE2

в module2-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: Module2Component1
    },
    {
        path: 'second',
        component: Module2Component2
    }
];

в Module2Component1

@Component({
    selector: 'app-module2-component1',
    template: ` <app-component1 [tabLink]="'BBB'" [columns] = "columns2"
     [displayedColumns] = "displayedColumnsB"> </app-component1> `

})

в Module2Component2

@Component({
    selector: 'app-module2-component2',
    template: ` <app-component2 [FormControl]="formControlB" 
    [tabLink]="'BBB'" [searchFields] = "searchFields2"> </app-component2> `

})

MODULE3:

in module3-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: Module3Component1
    },
    {
        path: 'second',
        component: Module3Component2
    }
];

in Module3Component1

@Component({
    selector: 'app-module3-component1',
    template: ` <app-component1 [tabLink]="'CCC'" [columns] = "columns3"
     [displayedColumns] = "displayedColumnsC"> </app-component1> `

})

in Module3Component2

@Component({
    selector: 'app-module3-component2',
    template: ` <app-component2 [FormControl]="formControlC" 
    [tabLink]="'CCC'" [searchFields] = "searchFields3"> </app-component2> `

})

Каков наилучший способ поддерживать те же логи c и минимизировать код и время загрузки?

Answer 1

Я думаю, что каждый модуль должен быть компонентом, чтобы у нас не было дублированного кода. Это не хорошо, если у нас есть тяжелые компоненты.