Angular 2 pass data between two components from the same tree level?

Question

Given two angular 2 components :

ListItemsComponent.
ShowItemComponent.

When user selects an item from ListItemComponent he must be redirected to ShowItemComponent by receiving selected item object.

Knowing that both components are present in the same tree level.

What is the best way to past object item from listItemsComponent to ShowItemComponent ?

You can use "EventEmitter" in data service...Please check http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter — Bharat Chauhan, Feb 08 '17 at 10:42
isn't there a direct way to communicate data without passing by parent as intermediate ? — user2080105, Feb 08 '17 at 10:45
please add you design screen images. You redirect component using route? — Bharat Chauhan, Feb 08 '17 at 10:50
yes I redirect using route, about screen sorry I wont it's confidential — user2080105, Feb 08 '17 at 11:06
It's all explained here: https://angular.io/docs/ts/latest/cookbook/component-communication.html — seidme, Feb 08 '17 at 11:31
yes u cant comunnicate components withouts parent, in other hand u can inject @viewChild from parent to childs component ;) if u dont want return values to parent ;) — Daredzik, Feb 08 '17 at 11:31
isn't there a way to comunicate object using router like we did on angular 1.x — user2080105, Feb 08 '17 at 11:51
@user2080105 short simple answer: No. It's not possible to communicate with router. Only case is to stringify it and pass it as route parameter, but then that would show in your url. — AT82, Feb 08 '17 at 12:16

score 0 · Answer 1 · answered Feb 08 '17 at 12:26

you can use Router.navigate and give it the path of other component with the item id in ListItemComponent in constructor declare the Route constructor( private _router: Router)

 this._router.navigate(['..../ShowItemComponent', {itemId:itemId}])

and in the ShowItemComponent put ActivatedRoute

constructor(private _activateRoute: ActivatedRoute){

      this._activateRoute.params.subscribe(
          (param: any) => {
            let itemId = param['itemId'];
    });
}

I don't want to http request the same item twice (performance issue). — user2080105, Feb 08 '17 at 12:32

Angular 2 pass data between two components from the same tree level?

1 Answers1