-2

I am writing an Angular package where I will provide basic functionalities and allow user to extend it for customization according to their needs. Base component includes some services which I will use internally. So when I extend this component in my application it gives error because it needs super() call with the internally used services as parameters.

I checked this issue(https://github.com/angular/angular/issues/5155) on Angular GitHub repo which suggests to use 'Injector' to inject services in base component but that does not seem a correct way to do. Is there any better structure for this situation.

Base Component

    Component({
        selector: 'base-comp',
        template: `
            <p>
                base-comp works
            </p>
        `,
        styles: []
    })
    export class BaseComp implements OnInit {
        constructor(private someservice: SomeService,
            private anotherService: AnotherService
          ) {
        }
    }

Child Component

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent extends BaseComp {
        constructor(private localService: LocalService) {
          super(); // this gives error
        }
    }

I want child component to inherit without passing all the dependencies in super() call in constructor.

Liam
  • 27,717
  • 28
  • 128
  • 190
Vishal Soni
  • 81
  • 8
  • @Liam I understand that but I can't expect users to import the internally used services and pass it in the super call. In the linked GitHub Issue, it says to use 'Injector' in base component to inject the services. But that does not seem correct way to do. – Vishal Soni Jun 07 '19 at 11:10
  • Like I've said, that is why inheritance is an issue in this situation and should be avoided – Liam Jun 07 '19 at 11:12

1 Answers1

0

I want child component to inherit without passing all the dependencies in super() call in constructor

Tl;Dr You can't.

The highest level component gets DI if it is inherited from, then the consumer needs to propagate this DI downwards.

If you use a service instead of inheritance, i.e. favour composition over inheritance, then you can implement your functionality without the dependency issues you have now.

You could also implement a factory pattern(again as a service) for your dependencies, then you only need one injection, not multiple.

Liam
  • 27,717
  • 28
  • 128
  • 190
  • Sorry but I didn't get it. Are you suggesting to convert the base component to service and import it in the child component? I do not think that I have a 'has-a' relationship here. – Vishal Soni Jun 07 '19 at 11:40
  • Yes if you use a service, not a base component then you avoid your issue and you have a more flexible solution. – Liam Jun 07 '19 at 12:38
  • Thanks Liam for the help. In that case I manually have to call the Base Component/Service functions. Say I want to call a submit() function on form submit which I inherited from the base component. User will have to manage it. It would be a great help if you can point to some example. – Vishal Soni Jun 07 '19 at 12:50