如何在Angular中将子组件的@inputs和@outputs隐式地暴露给祖父母？

Question

概述：

我只是想了解处理这种情况的正确方法。说我想
使用现有组件（例如mat-select）创建组件的自定义版本（例如水果选择元素）。现在说现有的组件公开了一堆@inputs和@outputs，而我的组件并没有对其自己的使用者“重新暴露”。

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

以下是我试图传达的内容的一个示例：

在此示例中，我创建了一个FruitSelect + MatSelect组成的some custom behavior around it组件。但是对于这个示例，我没有故意公开placeholder公开的@Input MatSelect。

想要在视图中使用FruitSelect的应用程序如何指定placeholder？

我可以想到的选项：

1. 通过MatSelect类，然后手动重新暴露所有@Inputs和@Outputs。对于@Outputs，我将不得不编写仅将事件传播出去的包装器方法。
2. 使我的FruitSelect 扩展 MatSelect成为隐式访问它super的交互者的权限。尽管这似乎是第一个解决方案，但尚不确定它是否容易实现。谷歌搜索没有显示很多人在这样做，所以不确定。

Answer 1

据我所知，您有您描述的2个选项。根据我的经验，我可以说我只使用过一次组件继承，它有很多缺点-它带来了另一种复杂程度（巨大），它不继承模板，并检查您将从MatSelect继承什么到您的子组件（〜30个公共字段）。

---

因此，在继承的情况下，您最终会得到一个组件，该组件内部有一个无意义的字段，您仍然需要绑定所有输出到继承的事件触发器（再次因为模板未被继承）。

---

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

---

谈到我的观点，我肯定会喜欢第二种选择（重新曝光）。希望能有所帮助。