Angular 2 在组件之间传递数据答案

【问题标题】：Angular 2 Pass data between componentsAngular 2 在组件之间传递数据
【发布时间】：2017-08-12 18:36:57
【问题描述】：

事情就是这样。我有两个组件需要交换数据。假设组件 1 和组件 2。

在组件 1 中，我有变量图和方法 loadGraph

 graph: any = new joint.dia.Graph;

 loadGraph(objectName, objectName2, objectCol1, objectCol2) {
    this.graph.fromJSON({... })
 }

在组件 2 中，我正在调用该方法

this.edit.loadGraph(objectName, objectName2, objectCol1, objectCol2);

现在，当我返回组件 1 并尝试记录图形变量时，它没有设置为任何值。这意味着组件 2 没有向组件 1 传递任何数据。

我正在使用 Provider 与组件进行通信。在组件 2 中，我有这个：

import {Component1} from '....something';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
  providers: [Component1]
})

export class Component2 implements OnInit {

  constructor(private edit: Component1) {

  };
}

我可能需要 Child - Parent 组件作为我的解决方案？如果是这样，我的两个组件会是什么样子？

【问题讨论】：

也许这是一个冗长的答案，但看看@Input()
Component2 是Component1 的子组件，还是这两个组件处于同一级别？
@ulubeyn 不，Component1 是 Component2 的子级。至少我认为是，我在 Component2 模板中使用 Component1 Selector。所以应该是孩子吧？

标签： angular angular2-components

【解决方案1】：

您需要在需要通信的组件的公共父级上提供提供程序。如果你把它添加到每个组件的提供者中，每个组件实例都会得到它自己的服务实例，然后通信将无法进行，因为它们需要使用共享实例。

您也可以通过@NgModule(...) 提供服务。这样，单个实例就可以与整个应用程序共享。

【讨论】：

【解决方案2】：

@Gunter 是对的，但我觉得如果您正在制作企业级应用程序，并且将有许多这样的组件，您必须在组件之间传递数据，请查看 Angular 的 redux 架构，无论是 ngrx-store 还是 ng2-redux。

如果你想检查 redux 是如何工作的，请查看 git hub 中的这个 repo，在 ngrx store 上有一个非常简单的 angular 演示。

https://github.com/rahulrsingh09/AngularConcepts

【讨论】：

【解决方案3】：

...也许对某人仍然相关...

对我来说，您似乎想调用由 Component2（父级）上的事件（如按钮单击）触发的 Component1（子级）上的方法。明确一点——“存在于 DOM 中”的子组件实例，对吧？

您可以为此使用@ViewChild。您将获得对 Component1 的引用并调用该函数。

如果父/子的东西在这里混在一起this 可能是另一种选择。

我不会provide 组件，只是services。是的，有可能，您可以使用@Injectable 标记任何类（似乎它甚至可以在没有的情况下工作），但它永远不会是“来自 DOM”的组件实例。这将是“最近”提供的一个实例。如果您在组件级别提供，您的组件将获得您的组件创建的新实例 - 如果您的所有子组件使用 dependency injection，则它们将获得相同的实例。

【讨论】：

【解决方案4】：

如果您在Component1(parent) 内有Component2(child)，那么您可以这样从Component1 调用Component2 的方法：

`http://plnkr.co/edit/KK9v0DZSrD0L2tN5EXzD?p=preview`

【讨论】：

你想说的是使用Output和EventEmitter，对吧？ :)
是的，这是另一种选择 :) 但我的意思是引用子元素，它是父元素的成员。
我仍然认为这是解决这个问题的最佳选择。