Angular 将 @Input 用于深度嵌套的组件

Question

我是 Angular 的新手，并试图了解解决以下情况的最佳方法（另请参阅带有插图的链接）：

我有一个带有多个图块的页面（如垫卡）。每个磁贴都有几个功能，例如显示图表、表格和围绕它的一些操作。

我的嵌套组件在 angular 中的插图

我可以嵌套组件并将数据从父级（从服务中获取数据）传递给第 n 个孙子级。所以像 parent > @Input child > @Input grand-child > @Input n-th Grand child 之类的东西。 但这是正确的方法还是通过@Input 变量“链接”数据超出子组件（例如，grand-grand-children）的缺点？我在问，因为我只看到简单的父对子 @Input 交互的示例，但看不到任何示例/建议，您也可以对深度嵌套的（大）子节点执行此操作。谢谢你的建议。

Answer 1

是的。不幸的是，如果您对使用@Input() 死心塌地，您将不得不这样做。

或者，您可以考虑为此目的使用 observables 或 ngrx 存储，具体取决于您传递的数据。

听起来您可能正在将表数据从父组件传递给孙组件。在这种情况下，我建议通过 observable 订阅来自孙子的数据。

这将清除您可能需要的所有@Input()，如果这些数据存储在服务中，您甚至可能不需要在父组件中引用它们。

查看此答案以了解您如何做到这一点。