Angular2：通过引用传递组件之间的交互

Posted 2023-03-17

【中文标题】Angular2：通过引用传递组件之间的交互

【英文标题】：Angular2: Pass by reference to interact between components

【发布时间】：2017-03-08 16:40:14

【问题描述】：

当我们将model 传递给子组件并对其进行修改时，这些值仅反映在子组件的局部变量中，而对父组件不可用。我们可以通过引用从父级到子级传递值吗？所以那里的变化也是可见的。

我在服务层使用observable 实现了相同的功能。但是我们不能通过引用传递@Input吗？

【问题讨论】：

你能发布一个完整的例子来说明你在说什么（也许对预期的行为有更多的解释）？

我不能在这里发布完整的例子。但我的确切情况是我想将 formGroup 传递给我的子组件并读取父组件中的值，这不会发生，因为只有子 formGroup 被修改。

***.com/questions/36246994/… 的重复项？

【参考方案1】：

原始值（string、num、boolean、对象引用）通过值传递（复制），对象和数组通过引用传递（两个组件都获得对同一个对象实例的引用）。

只需将原始值包装在对象中，更改就会反映在双方。

Angular2 更改检测不会检测到数组或对象属性中值的更改（绑定表达式处理它们时除外）。

【讨论】：

注意：这不是 Angular2 或 TypeScript 特定的。这就是 javascript 的工作原理。

学习 Angular 的困难之一是文档中往往不会提及诸如此类的一些关键信息。需要努力收集这些信息并将其包含在内，这样就无需成为 JavaScript 专家即可使用 Angular。

@MickeySegal 这是 JavaScript 基础知识，与 Angular 无关。不是每个 web 框架都记录 JS 是没有意义的。

我赞扬您在此线程中提出关于通过引用传递这一点的帮助，但我认为给 Angular 带来如此陡峭的学习曲线的一件事是需要从能够编写 Angular 代码之前的 JavaScript 和 TypeScript。在语言开发的某个阶段，减少学习 JavaScript 等前辈的需要是有意义的，而是使 Angular + TypeScript 文档和教程更加独立......

@karthikaruna 您可以在传递对象之前克隆它。一个安全的方法是***.com/a/42758108/217408，如果你不需要深拷贝，因为对象属性都是原语，那么你也可以使用链接问题的其他答案之一。

【参考方案2】：

实际上 - Angular 中有一个“技巧”，允许您将原始类型（如字符串或数字）传递给子组件，并将这些更改发送回父组件引用的数据。这是通过创建一个名称与输入完全匹配的“输出 EventEmitter”来完成的 - 但后缀为“Change”。我不确定这是否记录在任何官方 Angular 文档的任何地方 - 经过粗略检查后我无法找到它。

不管怎样，我能找到的记录这种技术的最好的堆栈溢出帖子是这样的： https://***.com/a/37855138/5692144

还有这篇文章——但它没有具体讨论@Output EventEmitter 命名的要求： https://***.com/a/43571004/5692144

并且我已经确认这可以按照描述进行。

我不确定为什么 Angular 的架构师/设计师没有将这种技术作为“一等公民”，它不需要您使用晦涩/神秘的命名约定（对于您的输出 EventEmitter）。