角度 2 在组件之间传递数据

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) {
  };
}

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

Answer 1

您需要在

需要通信的组件的公共父级上提供提供程序。如果将其添加到每个组件的提供程序，则每个组件实例都将获得自己的服务实例，然后通信将不起作用，因为它们需要使用共享实例。

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

Answer 2

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

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

https://github.com/rahulrsingh09/AngularConcepts

Answer 3

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

对我来说，看起来您想在组件 1(子级(上调用由组件 2(父级(上的事件(如按钮单击(触发的方法。需要明确的是 - "存在于 DOM 中"的子组件实例，对吧？

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

如果父/子的东西在这里混淆了，这可能是相反的一种选择。

我不会provide组件，只是services.是的，这是可能的，您可以使用@Injectable标记任何类(似乎它甚至可以在没有的情况下工作(，但它永远不会是"来自 DOM"的组件实例。这将是"最近"提供的实例。如果在组件级别提供，则组件将获得组件创建的新实例 - 并且所有子组件都将获得相同的实例(如果它们使用依赖项注入(。

Answer 4

如果你在

Component1(parent)里面有Component2(child)，那么这就是你可以从Component1调用Component2的方法：

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