Question

假设我有一个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”不是已知元素

我的问题是：

是否可以使用OutlookBarItemComponent作为内部组件而不暴露于BusinessModule？
在这种情况下，将逻辑分为OutlookBarComponent和OutlookBarItemComponent是一个好习惯吗？

Answer 1

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

对于Item2，根据一般准则，您的组件需要较细，应包含视图/表示逻辑。您可以将业务逻辑移至服务，可以在其他组件中重复使用。还有聪明而笨拙的组件体系结构。智能组件将执行与功能相关的所有业务逻辑。哑组件将接收数据作为输入，并且仅用于表示逻辑。

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

1 个答案: