CODEWITHSUNDEEP
angularangular2-routingparametersangular2-output
Cruclax
Cruclax

Reputation: 414

How to share params variables in child/parent components in Angular2 rc6 without using @Output?

I need to access a Params variable sent to a child component in the parent component.

I have the following structure:

Routing: (excerpt)

  {
      path: 'song',
      component: SongExerciseComponent,
      children: [
          {
              path: 'reading/:id',
              component: SongReadingComponent,
          }
      ]
  }

The parent component is just a template holding navigation links. I can access the :id var in the child component like so:

  ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
      if (params['id'] !== undefined) {
        let id = +params['id'];

Now I need the same variable in the parent component to be used in the parent template.

Which is the most effective way to do this? Sharing a service? https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-and-children-communicate-via-a-service

Upvotes: 0

Views: 496

Answers (1)

Kamil Myśliwiec
Kamil Myśliwiec

Reputation: 9168

You could create a shared service or use Ngrx store, inspired by Redux for Angular2.

There you can read about it - https://gist.github.com/btroncone/a6e4347326749f938510

The advantage of this solution is that you can subscribe changes and react on them. Also, data is immutable so you will not change something by mistake. If it is not important for you, just use service.

Upvotes: 1

Related Questions