Passing data into a routed component with Angular2

Question

I have a component that's loaded via routing and I'm trying to pass data into the component from a parent component. How would I go about doing this?

Parent Component Class

export class HomeComponent{
    userName: string;
    userId: string;

    ngOnInit(): void{
        this.userName = "user name";
        this.userId = "user id";
    }
}

Parent Component Template

<div>
    <p>Parent Component</p>
</div>
<router-outlet></router-outlet>

Child Component Class

export class ChildComponent{
    userName: string;
    userId: string;
}

Basically, the home component has child routes that are only available to that component. The child component is automatically loaded along with the parent component, but I want to use the data from the parent component, inside the child component. For practicality purposes and not having questions about whether my application is set up correctly, it is.

Provide a service at the parent component, inject it in the child component. Ideally use one or more Observables (BehaviorSubject) in the service to pass the values along. — Günter Zöchbauer
– Günter Zöchbauer, Commented Nov 1, 2017 at 19:51

Matt Searles · Accepted Answer · 2017-11-02 02:07:52Z

1

You can pass variables via the Router if you want to, eg.

const routes = 
[                                                                                     
    { path: "child/:customerId", component: ChildComponent },                                                               
]

Then you can access customerId via the ActivatedRouteSnapshot

eg.

class ChildComponent
{
  constructor(route : ActivatedRouteSnapshot)
  {
    const customerId = +route.params["customerId"];
  }
}

edited Nov 2, 2017 at 2:07

answered Nov 2, 2017 at 1:57

Matt Searles

2,7752 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dddenis · Accepted Answer · 2017-11-02 01:20:10Z

0

Providing a service with reactive data is the best solution.

answered Nov 2, 2017 at 1:20

dddenis

5001 gold badge9 silver badges14 bronze badges

Collectives™ on Stack Overflow

Passing data into a routed component with Angular2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related