时间戳

首页 > 解决方案 > Angular Kendo UI 全局访问

angular - Angular Kendo UI 全局访问

问题描述

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

剑道-ui.module.ts

@NgModule({
  exports: [
    ButtonsModule
  ]
})

ui.module.ts

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

核心模块.ts

@NgModule({
  exports: [ UiModule ]
})

app.module.ts

@NgModule({
  imports: [ CoreModule ]
})

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

LoginComponent例如，要让 Kendo UI 组件KendoUiModule在AuthModule.

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

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

问题：处理此问题以使代码尽可能精简的最佳方法是什么？

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

标签： angularkendo-ui

解决方案

老实说，我宁愿拆开shared模块kendo。 Shared应该有诸如BrowserAnimationsModule. ButtonsModule我真的只想包含在app.module使用 Kendo 组件的 或 模块中。

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

剑道-ui.module.ts

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

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

export { KendoUiModule }

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

登录模块.ts

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

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

或者，您可以直接导入它。

登录模块.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声明的组件，而不是它导入的组件。这就是为什么我宁愿将它们导入每个组件本身。

但最终它取决于你如何更好地喜欢它。

推荐阅读