child 更新 parent 的 'Angular way' 是什么?
What's the 'Angular way' of a child updating a parent?
似乎有几种给这只猫剥皮的方法,但我想知道最好的(做法)以及原因。
如果我想在 child-cmp 中收集一些数据并将其传递给 parent-cmp,我可以:
- 用 parent 中的函数包装 object 并将其作为输入传递给
child,在输入上调用函数。
- 在 child-cmp 中创建一个 EventEmitter 函数并发出结果,
在 parent-cmp.
中收集数据
- 通过@ViewChild()访问child,直接调用它的
方法。
- 使用要收集的数据创建一个 ngModel(仅在表单中?)
我相信还有更多。对于非基于表单的组件,我觉得使用事件发射器是最 Angulary 的事情。但是我无法真正解释为什么具有良好的技术基础。想法?
@Output()
是连接child和parent的第一个选择,当没有其他选择的具体原因时[=29] =]
它在组件之间创建最少的耦合。如果您想在另一个 parent 组件中使用 child,这是最简单的方法。这就是 Angular 组件的全部 - 可重用性。
共享服务是另一种选择,尤其是当没有直接 parent child 关系时。
*ngModel
(在 child 组件中实现 ControlValueAccessor
)如果要在表单中使用该组件是个好主意。
避免
使用 @ViewChild()
获取 child 的引用会使 parent 依赖于实现特定接口的 child 组件。
用函数包装 object(或以其他方式传递方法或 object 引用)
传递方法会引入强耦合。使用共享服务。共享服务也是一个带有方法的 class 实例,但它是 Angular 每个开发人员都习惯的标准方式,而且更明确。要将更新推送到参与的组件,请使用
似乎有几种给这只猫剥皮的方法,但我想知道最好的(做法)以及原因。
如果我想在 child-cmp 中收集一些数据并将其传递给 parent-cmp,我可以:
- 用 parent 中的函数包装 object 并将其作为输入传递给 child,在输入上调用函数。
- 在 child-cmp 中创建一个 EventEmitter 函数并发出结果, 在 parent-cmp. 中收集数据
- 通过@ViewChild()访问child,直接调用它的 方法。
- 使用要收集的数据创建一个 ngModel(仅在表单中?)
我相信还有更多。对于非基于表单的组件,我觉得使用事件发射器是最 Angulary 的事情。但是我无法真正解释为什么具有良好的技术基础。想法?
@Output()
是连接child和parent的第一个选择,当没有其他选择的具体原因时[=29] =] 它在组件之间创建最少的耦合。如果您想在另一个 parent 组件中使用 child,这是最简单的方法。这就是 Angular 组件的全部 - 可重用性。共享服务是另一种选择,尤其是当没有直接 parent child 关系时。
*ngModel
(在 child 组件中实现ControlValueAccessor
)如果要在表单中使用该组件是个好主意。
避免
使用
@ViewChild()
获取 child 的引用会使 parent 依赖于实现特定接口的 child 组件。用函数包装 object(或以其他方式传递方法或 object 引用)
传递方法会引入强耦合。使用共享服务。共享服务也是一个带有方法的 class 实例,但它是 Angular 每个开发人员都习惯的标准方式,而且更明确。要将更新推送到参与的组件,请使用