Angular 2 Pass data between components

Question

Here is the thing. I have two components where data needs to be exchanged. Let's say Component 1 and Component 2.

In Component 1 I have variable graph and method loadGraph

 graph: any = new joint.dia.Graph;

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

In Component 2 I am calling that method

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

Now when I go back to Component 1 and try to log graph variable, its not set to anything. Which means Component 2 didn't pass any data to Component 1.

I am using Provider to communicate with components. In Component 2 I have this:

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

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

export class Component2 implements OnInit {

  constructor(private edit: Component1) {

  };
}

I probably need Child - Parent component as my solution? If that's the case, how would my two components look?

Answer 1

You need to provide the provider on a common parent of the components that need to communicate. If you add it to providers of each component, each component instance will get it's own service instance and then communication won't work because they need to use a shared instance.

Alternatively you can provide the service in @NgModule(...) . This way a single instance is shared with the whole application.

Answer 2

@Gunter is right but i feel if your are making an enterprise level application and there will be many such components where you have to pass data between components , look at the redux architecture for angular either ngrx-store or ng2-redux.

If you want to check how redux works please look at this repo in git hub has a very simple demo on ngrx store with angular.

https://github.com/rahulrsingh09/AngularConcepts

Answer 3

... maybe still relevant for someone ...

For me it looks like you want to call a method on Component1 (the child) triggered by an event (like a button click) on Component2 (the parent). To be clear - the child component instance that "lives in the DOM", right?

You can use @ViewChild for that. You will get a reference to Component1 and just call the function.

If the parent/child thing is mixed up here this could be an option for the other way round.

I would not provide components, just services . Yes it is possible, you can mark any class with @Injectable (seems like it even works without), but it would never be the component instance "from the DOM". It would be the instance of the "nearest" provided one. If you provide at component level, your component will get a new instance your component created - and all your child components will get the same instance, if they use dependency injection .

Answer 4

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

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