Question

我以这种方式（为简便起见简化了）捆绑Kendo UI模块：

kendo-ui.module.ts

@NgModule({
  exports: [
    ButtonsModule
  ]
})

ui.module.ts

@NgModule({
  exports: [
    BrowserAnimationsModule,
    KendoUiModule
  ]
})

core.module.ts

@NgModule({
  exports: [ UiModule ]
})

app.module.ts

@NgModule({
  imports: [ CoreModule ]
})

这是行不通的，因为Kendo UI模块不是全局可见的。

例如，要使Kendo UI组件能够在LoginComponent中工作，我必须将KendoUiModule导入AuthModule。

我可以将KendoUiModule移到shared文件夹中，然后将其导入到需要它的每个模块中，但这是一种使组件可在整个应用程序中访问的效率低下的方法。

这是一个UI框架，它毕竟是整个应用程序的核心。

问题：什么是最好的处理方式，以使代码尽可能地精简？

这个问题也适用于其他情况。因此，以 Angular方法完成的有效解决方案将为 minimalist 方法提供另一种策略，而不会牺牲功能。

Answer 1

说实话，我宁愿拆解shared和kendo模块。 Shared应该有BrowserAnimationsModule之类的东西。 ButtonsModule我真的会只包括在app.module或利用Kendo组件的模块中。

如果您真的想为剑道制作一个模块，然后像这样创建它，只需导入和导出仅剑道的东西：

kendo-ui.module.ts

import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
  imports: [ 
    ButtonsModule, 
    ... 
  ]
  exports: [ 
    ButtonsModule, 
    ... 
  ]
})

export { KendoUiModule }

然后为使用kendo的组件创建一个模块并导入该模块：

login.module.ts

import { KendoUiModule } from 'kendo-ui.module'

@NgModule({
  declarations: [ LoginComponent ],
  imports: [ KendoUiModule  ]
  exports: [ LoginComponent ]
})

或者，您可以直接将其导入。

login.module.ts

import { ButtonsModule } from '@progress/kendo-angular-buttons';

const kendoModules = [ButtonsModule, ...]

@NgModule({
  declarations: [ LoginComponent ],
  imports: [ 
     ...kendoModules
  ]
  exports: [ LoginComponent ]
})

然后将组件本身以及诸如BrowserAnimationsModule

之类的基本内容导入应用程序

app.module.ts

@NgModule({
  imports: [ LoginModule, BrowserAnimationsModule ]
})

优良作法是创建尽可能小的模块，然后仅将最必要的模块导入其中。最好是为每个组件增加一个模块。

如果您真的希望它们在全球范围内可用，则可以为kendo创建一个模块并将其提供在app.module.ts中。但是，这仅适用于app.module.ts声明的组件，而不适用于它导入的组件。这就是为什么我宁愿将它们导入每个组件本身。

但是最终要取决于您对它的喜欢程度。

Angular Kendo UI全局访问

1 个答案: