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。

我正在使用Provider与组件进行通信。在组件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是对的，但我觉得如果你正在制作一个企业级应用程序，并且会有许多这样的组件，你必须在组件之间传递数据，请查看ribx的redux架构ngrx-store或ng2-redux。

如果你想检查一下redux的工作方式，请在git hub中查看这个repo，在ngrx商店中有一个非常简单的带有角度的演示。

https://github.com/rahulrsingh09/AngularConcepts

Answer 3

...可能仍然适合某人...

对我来说，看起来你想要在Component2（父级）上的事件（如按钮点击）触发的Component1（子）上调用一个方法。要清楚 - ＆＃34;生活在DOM＆＃34;中的子组件实例，对吗？

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

如果父/子事情在这里混淆了this可能是反过来的选择。

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

Answer 4

如果Component2(child)内有Component1(parent)，那么您可以通过Component2调用Component1的方法：

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

Angular 2在组件之间传递数据

4 个答案: