javascript - 如何在 Angular 中将子组件的@inputs 和@outputs 隐式公开给祖 parent ？

Question

概述:

我只是想了解处理这种情况的正确方法。说我想
使用现有组件(例如 mat-select)创建组件的自定义版本(例如 fruit select 元素)。现在假设现有组件公开了一堆 @inputs 和 @outputs，我的组件不会“重新公开”给它自己的消费者。

如果现在有应用程序既想使用我的自定义组件又想使用“底部”组件的 @inputs/@outputs 怎么办？

这是我试图传达的一个例子:

在这个例子中，假设我创建了 FruitSelect 组件，它由一个 MatSelect + 围绕它的一些自定义行为 组成。但是对于这个例子，我有意没有暴露 MatSelect 暴露的 placeholder @Input。

想要在其 View 中使用 FruitSelect 的应用如何指定 placeholder？

我可以想到的选项:

1. 通过 MatSelect 类并手动重新公开所有 @Inputs 和 @Outputs。对于 @Outputs，我必须编写包装器方法来将事件传播出去。
2. 使我的 FruitSelect extend MatSelect ，因此它隐式地可以访问它的 super 的交互器。虽然这似乎是设计方面的第一个想到的解决方案，但不确定它是否容易实现。谷歌搜索没有显示很多人这样做，所以不确定。

Answer 1

因此，据我所知，您有 2 个您描述的选项。根据我的经验，我可以说我只看到组件继承被使用过一次，它有很多缺点 - 它带来了另一个级别的复杂性(巨大)，它不继承模板，检查您将从MatSelect继承什么进入您的子组件(~30 个公共(public)字段)。

---

所以在继承的情况下，您最终会得到内部有很多无意义字段的组件+您仍然需要绑定(bind)所有输出 到继承的事件触发器(再次因为模板没有被继承)。

---

另一方面，到目前为止，您只需要输入占位符，因此您可以重新公开它。它对您的组件也有意义，但并非所有 MatSelect 字段都对 FruitSelect 有意义，因此您可以选择哪些您想要重新-暴露。

---

谈到我的意见，我肯定更喜欢第二种选择(重新曝光)。希望有所帮助。