组件之间的Angular 2 Pass数据

Question

这是东西。 我有两个组件需要交换数据。 假设组件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。

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

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

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

export class Component2 implements OnInit {

  constructor(private edit: Component1) {

  };
}

我可能需要Child-Parent组件作为解决方案？ 如果是这样，我的两个组件看起来如何？

Answer 1

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

或者，您可以在@NgModule(...)提供服务。 这样，单个实例便与整个应用程序共享。

Answer 2

@Gunter是正确的，但是我觉得如果您要开发的是企业级应用程序，那么将会有很多这样的组件，您必须在这些组件之间传递数据，请查看redux体系结构中的ngrx-store或ng2-redux。

如果要检查redux的工作方式，请在git hub中的这个仓库上查看有关ngrx store的一个非常简单的演示。

https://github.com/rahulrsingh09/AngularConcepts

Answer 3

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

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

您可以使用@ViewChild 。 您将获得对Component1的引用，然后调用该函数。

如果父母/孩子的事情混在一起， 这可能是另一种选择。

我不会provide组件，而只会services 。 是的，有可能，您可以使用@Injectable标记任何类（似乎即使没有也可以使用），但是它决不是“来自DOM”的组件实例。 这将是“最近”提供的一个实例。 如果您在组件级别提供，则组件将获得您的组件创建的新实例-如果所有子组件都使用依赖注入 ，则所有子组件将获得相同的实例。

Answer 4

如果您在Component1(parent) Component2(child)内部具有Component2(child) ，则可以通过以下方法从Component1调用Component2的方法：

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