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

概述：

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

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

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

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

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

我能想到的选项：

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

标签： javascriptangularinheritanceangular-material

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

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

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

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