时间戳

首页 > 解决方案 > 如何避免在 Angular 中暴露内部组件

angular - 如何避免在 Angular 中暴露内部组件

问题描述

假设我有一个OutlookBarComponent包含一些类似 Microsoft Outlook 的栏。对于每个条，都有一个子组件OutlookBarItemComponent。OutlookBarComponent和都OutlookBarItemComponent封装在 中ControlModule，以便我可以在另一个业务模块中使用它们：

import { OutlookBarComponent, OutlookBarItemComponent } from 'control/control.module';

@NgModule({
  //...
  declarations: [
    OutlookBarComponent,
    OutlookBarItemComponent,
  ]
})
export class BusinessModule { }

这工作正常。

由于OutlookBarItemComponent实际上是一个内部组件，我不想BusinessModule知道它。但是在没有导入和声明OutlookBarItemComponent的情况下BusinessModule，Angular 会抱怨

'app-outlook-bar-item' 不是已知元素

我的问题是：

  1. 有没有办法在OutlookBarItemComponent不暴露的情况下用作内部组件BusinessModule？

  2. 在这种情况下，将逻辑分成OutlookBarComponentand是一个好习惯OutlookBarItemComponent吗？

标签： angular

解决方案

对于 Item1，Angular 遵循 ES6 模块概念，您需要将文件导出到其他位置才能导入。同样，您需要在 Modules 的声明属性下声明这些组件。因此，Angular 编译器可以轻松识别模板文件中的自定义元素何时出现。如果要在其他模块中使用该组件，还需要导出。

对于 Item2，根据一般准则，您的组件需要很纤薄，应该包含 View/presentation Logic。您可以将业务逻辑移动到服务中，这些服务可以在其他组件中重用。还有智能和愚蠢的组件架构。智能组件将执行与功能相关的所有业务逻辑。哑组件将接收数据作为输入，仅用于演示逻辑。

推荐阅读