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

标签 angular input nested components parent-child

我是 Angular 的新手,并试图了解解决以下情况的最佳方法(另请参阅带有插图的链接):
我有一个带有多个图块的页面(如垫卡)。每个磁贴都有几个功能,例如显示图表、表格和围绕它的一些操作。
illustration of my nested components in angular
我可以嵌套组件并将数据从父级(从服务中获取数据)传递给第 n 个孙子级。所以像
parent > @Input child > @Input grand-child > @Input n-th Grand child。
但这是正确的方法还是通过@Input 变量“链接”数据超出子组件(例如,grand-grand-children)的缺点?
我问的是 我只看到了一个简单的父对子 @Input 交互的例子,但看不到任何例子/建议,你会对深度嵌套的(大) child 这样做 以及。
谢谢你的建议。

最佳答案

是的。不幸的是,如果您对使用@Input() 死心塌地,您将不得不这样做。
或者,您可以考虑为此目的使用 observables 或 ngrx 存储,具体取决于您传递的数据。
听起来您可能正在将表数据从父组件传递给孙组件。在这种情况下,我建议通过 observable 订阅来自孙子的数据。
这将清除您可能需要的所有@Input(),如果这些数据存储在服务中,您甚至可能不需要在父组件中引用它们。
看看这个 answer关于你如何做到这一点。

关于Angular 将 @Input 用于深度嵌套的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63855201/

相关文章:

javascript - mat-select 组件的 Angular patchValue

javascript - 通过服务从 api 调用返回到组件的数据是一个对象,似乎需要成为 Angular 的数组

javascript - 是否可以/建议使用正则表达式解析我的用户输入字符串?

xml - 何时在 RESTful 资源表示中包含子项?

python - 如何检查 txt 文件中的每一行是否有正确的用户名和密码

angular - 奇怪的行为动态呈现输入类型复选框的类型 Angular 2+

angular - 如何从 component.ts 文件中的 Angular 2 中的 json 响应获取键/值对

java - 用户输入导致表单出现

java - 在Eclipse中输入 "System.in.read()"

javascript - 如何创建嵌套数组?