Angular 如何组织不同用途的角模态组件？

我在Angular 7中工作，我有一个即将推出的功能，用户可以选择创建、编辑、合并或拆分用户组。当用户选择这些选项中的任何一个时，会弹出一个模式，其中包含该操作所需的表单。UI设计中的所有模块都具有相同的总体外观，但四个模块的表单选项和表单布局都有很大不同（例如，一个模块有两列，另一个模块有一列，底部有一个表）。我想知道有什么好方法可以组织我的组件来实现这个模式

到目前为止，我的想法是：

基本模态组件，并使用子组件导入实际模态内容

一个组件具有所有四个模式模板，并且相应的模式模板由父组件调用（主页面，其中包含用于选择创建、编辑、合并和拆分操作的菜单）

---

我不确定我自己的方法是否是“最好的”，但我会选择选项1。在共享模块中创建一个基本模态，然后模态内容组件将在最适合它们的地方定义。如果每个内容组件在整个应用程序中共享，那么它们也将位于共享模块中。如果它们特定于给定的功能/模块，我会将它们保留在该模块中。选项1通常是这样做的，因为它可以更好地扩展。但是，既然角材料已经提供了模态/对话功能，为什么还要在这里重新发明轮子呢？嗨，凯瑟琳，我投票结束这些问题，因为它是基于观点的。我会开始构建，不要想得太多，你可以重构，你会随着你更好的组织而重构。您可以有一个抽象加载主体内容的模态组件，但很难访问父组件中更改的模型绑定，因此请记住这一点，不要让事情变得比开始时更困难。我还想补充另一点，您可能很好，但您的部分需求同样与CSS组织/类有关。