0

The angular app has the routes as follows:

componentRoutes: Routes = [
    {path: 'child',
    canActivate: [guardService],
    component: ParentComponent,
    children: [
        {path: '', component: nestedChildComponent1},
        {path: ':id', children: [
            {path: 'child2', component: nestedChildComponent2},
            {path: 'child3', component: nestedChildComponent3},
        ]},
    ]
},
];

The Parent component is as follows: 

@component({
  template: <div>
                <H3> This is Parent Component </H3> 
                <button id='button' (click)="buttonClickedHandler()"> click me </button>
            </div>
            <router-outlet></router-outlet>   <--- nested child components go here
})
export class ParentComponent implements OnInit, OnDestroy {
...
}

The button in ParentComponent is common among all the nested routes. Each nested child component has to provide their own implementation to the buttonclickedHandler. How should i go about this? Should my nested components extend the ParentComponent or should it implement an interface that provides the buttonclickedHandler an abstract API?

I referred abstract method in typescript and creating interfaces for angular services posts and i am confused how to go about my problem.

prabhu
  • 369
  • 1
  • 4
  • 17

1 Answers1

0

There are probably many ways and all valid. the way I would handle it: ParentComponent provides a service with a Subject.
ChildComponents all extend an abstract class that requires this service

buttonClickHandler in parent component calls .next on the Subject ChildComponents subscribe to this Subject

Jason
  • 1,316
  • 13
  • 25
  • Is there a way achieving the same without using a service? – prabhu Dec 15 '17 at 18:23
  • I am not positive about this since they are in router outlet but if you can get to them using ViewChildren or ViewChild then you can typecast them to an interface that has the function to call. so like IChildComponent has to have a function called clickHandler or something like that – Jason Dec 15 '17 at 21:24