角度中可重用的嵌套组件?

时间:2021-01-27 12:03:58

标签: angular components reusability ng-content

几个月前我开始使用 angular,所以也许我要问的可能是无意义的。

我准备了一个带有工作示例的 stackblitz project。我有两个非常简单的组件(Component1 和 Component2),它们基本上可以有多个不同的 @Input() 参数。在任何情况下,它们都共享相同的 @Output() 称为“发射器”。在第一个示例中,包装器组件静态包含并管理它们的输出。一切都好!

现在我希望 Wrapper 包含 Component1 或 Component2。我只能通过 Wrapper 传递 Component1/2 配置参数,然后传递到 Component1/2。有什么办法可以避免这种情况吗? 在我看来,包装器不应该关心它的孩子或它的孩子的配置可能是什么,只要它有一个连贯的@Output()。 Wrapper 应该只关心接收它的子组件输出并管理它。 我准备了这个second stackblitz project(不工作)我想要实现的目标:

  1. 我决定在 Wrapper 中展示的内容与它无关。此外,我希望能够从 html 视图配置内部组件(使用 < ng-content > 获得的那种结果);
  2. Component1/2 输出必须由 Wrapper 管理,而不是由我声明要放入 ng-content 的组件管理;在这里我被卡住了,因为当然 ng-content 不会让输出冒泡,所以我无法将它放入我的 Wrapper 中;

有什么办法可以让我完成这项工作还是这是我的一些误解? 在我的实际应用程序中,Wrapper、Component1 和 Component2 更加清晰,可以接收更多与其功能相关的不同配置(这里我连接到样式以保持超级简单)。因此,正如我所说,将所有配置打包到一个变量中并将其作为输入传递给 Wrapper,以便它随后再次将其传递给其内部组件,这对我来说似乎并不那么聪明。 Wrapper 只管理输出,它不使用这些配置,那么他为什么要知道它们呢? 我也考虑过使用服务,但我的应用程序中可以有多个不同的 Wrapper,而且不是服务单例并在我声明它的所有组件之间共享吗?

0 个答案:

没有答案
相关问题