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

Question

概述：

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

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

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

在此示例中，假设我创建了由 MatSelect + some custom behavior around it 组成的 FruitSelect 组件。但是对于这个例子，我故意不暴露MatSelect暴露的placeholder@Input。

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

我能想到的选项：

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

Answer 1

所以，据我所知，您有 2 个选项。根据我的经验，我可以说我只见过一次组件继承，它有很多缺点 - 它带来了另一个级别的复杂性（巨大），它不继承模板，并检查你将从MatSelect继承到你的子组件（~30个公共字段）。

---

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

---

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

---

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