Delving deep into TypeScript inheritance, particularly in Angular 11, I've created a BasePageComponent to encompass all the necessary functions and services shared across pages. However, I've encountered an issue where my base class is becoming bloated because it includes services that are only used on one or two pages.
export class BasePageComponent {
constructor(
public uiPopupService: UiPopUpService,
public loaderService: LoaderService,
public questionService: QuestionService,
public aBunchOfOthers: OTHERS,
public exampleOneOffService: ExampleOneOffService
) {}
}
Realizing the inefficiency of this approach, I thought about passing only the necessary services up to the BasePageComponent by duplicating them in each child component:
export class ChildPageComponent extends BasePageComponent {
constructor(
public uiPopupService: UiPopUpService,
public loaderService: LoaderService,
public questionService: QuestionService,
public aBunchOfOthers: OTHERS,
private exampleOneOffService: ExampleOneOffService
) {
super(uiPopupService, loaderService, questionService, aBunchOfOthers);
}
}
While I can follow the above method, considering I have around 15-20 micro services included in the base class, I'm looking for a way to declare just the additional service in the child class while inheriting the rest from the parent. Is there a way to achieve this?
export class ChildPageComponent extends BasePageComponent {
constructor(private otherExampleService: OtherExampleService){
super()
};
}
Is there a known pattern for this requirement that I might be overlooking in my research?