Angular4 : How to pass data from parent to child for children added through router

Question

Continuing from this question Angular 4^ : How to have more than one child of a component with each child targeting its own router outlet, I'm able to have some child components injected into multiple parent components, now I want to pass data from those parents, async, to child. Tried @Input, can't seem to win.

Child

export class UserheaderComponent implements OnInit, AfterViewInit, OnChanges {
  loading;
  @Input() data;
  user = {
    name: '______________',
    icon: '',
    username: '_________',
    uid: '________'
  };
  constructor(private router: Router) {
  }

  goToUser(uid) {
    this.router.navigate(['user'], { queryParams: { uid: uid } });
  }

  ngOnInit() {
    this.user = this.data;
    console.log(this.data);
  }

  ngAfterViewInit() {
    console.log(this.data);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

Parent Html

  <router-outlet name='userprofile-userhead' [data]="currentUser"></router-outlet>

Parent TS

export class UserprofileComponent {
  public currentUser;

  constructor(
    private userFactory: UserFactory,
    private router: Router,
    private snack: MatSnackBar) {
    this.userFactory.checkSession(exists => {
      if (!exists) {
        return;
      }
      this.userFactory.getSessionUser((uid, user) => {
        this.currentUser = user;
      });
    });
  }
}

AND ROUTING

path: '', component: UserprofileComponent, outlet: 'userprofile', children: [
          { path: '', component: UserheaderComponent, outlet: 'userprofile-userhead' },
        ]

Nothing at all gets passed to child, is this possible with this kind of arrangement or I'm missing something?

Can't use a shared service.

Every component should use this with its own Id. Imagine this is in a timeline of posts like context, like a social media timeline, and this is a head of the post, you know, where the user icon, name...username is. So a 'post' component will inject this as a child, pass it a user object:{name:'...',username:'...'}, so I don't see how a service will do here.

Now while we at that, somewhere on the app, a profile component, a search component might call this...

If you still think a service will do, please elaborate.

Answer 1

I get you, but I think shared service is still the answer of this question

You could try implementing a pub/sub service where you can assign which data will it subscribe and broadcast.

try this:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

/**
 * Publisher/Subscriber Service
 */
@Injectable()
export class PubSubService {

    private events: any = {};

    constructor() { }

    /**
     * Subscribes the instance of the assigned event name
     * @param eventName
     * Event name of the delegate
     */
    public On(eventName: PubSubEvents): Observable<any> {

        if (typeof this.events[eventName] === 'undefined') {
            this.events[eventName] = new Subject<any>();
        }

        return this.events[eventName].asObservable();
    }

    /**
     * Broadcast data to the specified event channel
     * @param eventName
     * Event name of the delegate
     * @param eventArgs
     * Arguments to pass through to the connected channel
     */
    public Broadcast(eventName: PubSubEvents, eventArgs: any) {
        if (!this.events[eventName]) {
            return;
        }

        this.events[eventName].next(eventArgs);
    }

}

//Your events
export declare type PubSubEvents =
    "OnChild1" | "OnChild2";

In parent component you have subscribe all of the events base on your needs.

Parent

constructor(private pubsub: PubSubService){
  this.pubsub.On("OnChild1").subscribe((res) =>{ //Child 1 data}));
  this.pubsub.On("OnChild2").subscribe((res) =>{ //Child 2 data}));
}

while in child component you have to do this

Child 1

constructor(private pubsub: PubSubService){
  this.pubsub.Broadcast("OnChild1", "your_data")
}

Child 2

constructor(private pubsub: PubSubService){
  this.pubsub.Broadcast("OnChild2", "your_data")
}

Answer 2

I think in this case one valid option is to add some parameter to the routing of your UserheaderComponent and then get it when the component is initing and get expected data from service.

First, you need to add it to route path of your component

path: 'userHead/:userId' 

Then when you redirecting to that you need to set this parameter and then when the component is initializing you can get this

this.activatedRoute.params.subscribe((params) => { const userHead= 
params['userId']; }

Finally based on that paremeter you can get expected data form service.

In the case when you will have a single child consider using component directly like that

<userprofile-userhead name='userprofile-userhead' [data]="currentUser"> 
</userprofile-userhead>

instead of the router-outlet.

Answer 3

You can make your router path as -

{ path: 'userHead/:Id' }

Navigate on the component using function or directly:

  navigateUser(id) {
    this.router.navigate(['/userHead', id]);
  }

In your child component you can get the id by subscribing on the id of route param :

 ngOnInit() {
    this.ActivatedRoute.params.subscribe(params => {
      this.id = +params['id']; // (+) converts string 'id' to a number
      if (!isNaN(this.id)) {
       // logic here to check if id is something and put logic accordingly
    });
  }

• Second way is to use BehaviorSubjects. Let me know if you need to know about them, will try to provide code for same.

Answer 4

You can define the custom data to the route like this:

[
   {path: 'inbox', data: {name: 'foo', age: 23}},
]

and read like this:

class ConversationCmp {
    constructor(r: ActivateRoute) {
         r.data.subscribe((p) => {
              console.log(p);
         });
    }
}

It's defined on the Route interface:

export interface Route {
  path?: string;
  ...
  data?: Data;
}

credit here : https://stackoverflow.com/a/45450982/4770754

Answer 5

I am assuming that you are looking for the following flow : When some path matched , you want the router to render parent(where parent.ts is having the data or fetches the data through http(s)) and child. Now once after the rendering of the child, you want to pass the data from parent to child...if this is the requirement of yours, this might help you,

ParentComponent.ts

onActivate(event){
      this.yourService.getData().subscribe(x=>{
        event.data = x; // this is where you are assigning the data to child
      })

ParentComponet.html

<router-outlet (activate)="onActivate($event)" name="child"></router-outlet>

ChildComponent.ts

export class Child1Component implements OnInit {
data
  constructor() { }
  ngOnInit() {
  }
}

ChildComponent.html

 <div *ngFor="let e of data">      {{e.username}}    </div>
   // this is for an example to display the data from parent in child

Edited: Async without service -using formcontrol

Here , what i am doing is that whenever the parent value changes, which you are passing to child, we need to update the child value async, so using the ValueChanges in parent where it sets the value of child, now even if you edit the values in parent variable , it gets reflected into the child. Now i believe this completes the requirement of yours (without the shared service communication between parent and child :) )

In parent.ts

export class ParentComponent  {
  parentdata: any = [{name: 'hello', username: 'world'}];
  myForm: FormGroup;
  event: any;
  constructor(private ds: DataService,private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      pdata: [[]]
    });
    this.myForm.get('pdata').valueChanges.subscribe(val => {
      if(this.event!=undefined)
        {
          this.event.data =  this.myForm.get('pdata').value;
        }
      })
   }
  ngAfterViewInit() {
       //this is for just for playing around with data of parent,
       // to check whether child receives the data or not
    setTimeout(function(myForm){

    let d = myForm.get('pdata').value;
    console.log(myForm.get('pdata').value);
    d.push({name: 'hello', username: 'world'});

  },3000,this.myForm)
  }
  onActivate(event){
    this.event = event;
    this.ds.getData().subscribe(x=>{
        this.myForm.get('pdata').setValue(x);
      })
  }

}

Hope this helps !!!