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

Posted

技术标签:

【中文标题】Angular 将 @Input 用于深度嵌套的组件【英文标题】:Angular using @Input for deeply nested components 【发布时间】:2020-12-30 10:58:53 【问题描述】:

我是 Angular 的新手,并尝试了解解决以下场景的最佳方法(另请参阅带有插图的链接):

我有一个包含多个图块的页面(如垫卡)。每个图块都有一些功能,例如显示图表、表格和围绕它的一些操作。

illustration of my nested components in angular

我可以嵌套组件并将数据从父级(从服务获取数据)传递给第 n 个孙子。所以像 父> @Input child > @Input grand-child > @Input n-th 孙子。 但这是正确的方法还是通过@Input 变量“链接”数据超出子组件(例如grand-grand-children)的缺点? 我问的是我只看到了简单的父子@Input 交互的示例,但看不到任何示例/建议您也可以对深度嵌套的(大)子进行此操作 . 谢谢你的建议。

【问题讨论】:

【参考方案1】:

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

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

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

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

查看此answer,了解您可以如何做到这一点。

【讨论】:

这个。您自己的自定义服务(更易于实施)或集中式存储(可扩展的方法,人们知道如何使用它)。

以上是关于Angular 将 @Input 用于深度嵌套的组件的主要内容,如果未能解决你的问题,请参考以下文章

Angular @Input getter/setter 和非原始值

Angular 2+/4/5/6/7:智能、愚蠢和深度嵌套的组件通信

如何使用 angular2 ngFor 深度嵌套的 json 值

在嵌套组件中嵌套 Angular 组件

angular双向绑定

嵌套组件不适用于 Angular 中的路由