Angular Kendo UI Global Access

Question

我以这种方式捆绑Kendo UI模块(为了简洁起见，简化了(：

剑道ui模块.ts

@NgModule({
exports: [
ButtonsModule
]
})

ui.module.ts

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

核心模块.ts

@NgModule({
exports: [ UiModule ]
})

应用程序模块.ts

@NgModule({
imports: [ CoreModule ]
})

这不起作用，因为Kendo UI模块不是全局可见的。

例如，为了让Kendo UI组件在LoginComponent中工作，我必须将KendoUiModule导入到AuthModule中。

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

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

问题：为了使代码尽可能精简，最好的处理方法是什么？

这个问题也适用于其他情况。因此，在不牺牲功能的情况下，以角度方式完成的有效且高效的解决方案将为极简主义方法提供另一种策略。

Answer 1

老实说，我宁愿拆开shared和kendo模块。Shared应该有BrowserAnimationsModule这样的东西。CCD_ 10实际上只是包括在CCD_ 11中或使用Kendo组件的模块中。

如果你真的想为剑道制作一个模块，那么就这样创建它，只需导入和导出剑道专用的东西：

剑道ui模块.ts

import { ButtonsModule } from '@progress/kendo-angular-buttons';
@NgModule({
imports: [ 
ButtonsModule, 
... 
]
exports: [ 
ButtonsModule, 
... 
]
})
export { KendoUiModule }

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

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等基本内容导入应用程序

应用程序模块.ts

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

创建尽可能小的模块并只将最必要的模块导入其中是一种很好的做法。最好是为每个组件增加一个模块。

如果你真的希望它们在全球范围内可用，那么为剑道创建一个模块并在app.module.ts中提供它就足够了。然而，这只适用于app.module.ts声明的组件，而不适用于它导入的组件。这就是为什么我宁愿在每个组件本身中导入它们。

但最终取决于你喜欢它的程度。