Question

我有一个包含三个模块的Angular应用程序，这些模块使用具有不同参数的相同组件。我在下面使用了demarche，我认为这不是一个好的解决方案，我使用了预加载策略，但我对非重复组件的兴趣不止于此。每个组件的状态并不重要。

在 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
    }
];

在 Module1Component1

中

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

})

在 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：

在 module3-routing.module.ts

中

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

在 Module3Component1

中

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

})

在 Module3Component2

中

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

})

维护相同逻辑并最小化代码和加载时间的最佳方法是什么？

Answer 1

我认为每个模块都应该是一个组件，这样我们就不会有重复的代码。如果组件繁重，那就不好了。

在Angular应用程序中路由具有不同参数的相同组件

1 个答案: