Access router outlet component from parent
Make use of activate
event for the same .
Whenever we load a component in router outlet a activate event is emitted make use of that to get the component ref and call the respective method.
Parent Component
<div class="container">
<router-outlet (activate)="onActivate($event)"></router-outlet>
</div>
Template
onActivate(componentRef){
componentRef.works();
}
Child Comp
works(){
console.log("works");
}
A small addition to @Rahul Singh great answer:
Make sure you check, which component instance is returned in the
(staying at Rahul's example) onActivate(componentRef)
method,
and only call works()
, if that component indeed has such method.
Example:
onActivate(componentRef){
if(componentRef instanceof ChildWithWorksMethodComponent){
componentRef.works();
return;
}
console.log("This is not the ChildWithWorksMethodComponent");
}
Otherwise, every time you navigate to a route, which component doesn't have such method, your console log will be full of errors like:
ERROR TypeError: componentRef.works is not a function
Router-outlet is related to routing it has nothing to do with accessing the child component methods.You have to use @ViewChild for accessing child component functions from the parent.You can find the example here
update
If above isn't a feasible solution in your case,you may tap into activate event to get reference of instantiated component inside the router outlet.
From the docs
A router outlet will emit an activate event any time a new component is being instantiated, and a deactivate event when it is being destroyed.
Hence you can use these feature and get your work done.You can see elaborated answer here and a plunker is attached in the same answer