Is there a way to share dependency injection between child and parent components using the new Angular 2.3 Component Inheritance?
For instance, I aim to transfer AlertService down into the parent component while keeping TraingCompanyService in the derived component.
Current Component
@Component({
selector: 'wk-training-company-edit',
template: require('./edit.html')
})
export class TrainingCompanyEditComponent implements OnInit, OnDestroy {
constructor(
private alert: AlertService,
private trainingCompanyService: TrainingCompanyService
) {
}
}
Refactored Components (V1)
Super must be called before calling this in the constructor of the derived class
@Component({
selector: 'wk-training-company-edit',
template: require('./edit.html')
})
export class TrainingCompanyEditComponent extends BaseAdminEditComponent implements OnInit, OnDestroy {
constructor(
private alert: AlertService,
private trainingCompanyService: TrainingCompanyService
) {
// Error: Super must be called before calling this in the constructor of the derived class
super(this.alert);
}
}
export class BaseAdminEditComponent {
constructor(private alert: AlertService) {
}
protected handleSaveError(error: any) {
if (error.message) {
if (error.errors && _.isArray(error.errors) && error.errors.length > 0) {
this.alert.error(_.join(error.errors, '\n'), error.message);
}
else {
this.alert.error(error.message);
}
}
}
}
Refactored Components (V2)
Class TrainingCompanyEditComponent incorrectly extends base class BaseAdminEditComponent, types have seperate declarations of private property 'alert'
@Component({
selector: 'wk-training-company-edit',
template: require('./edit.html')
})
export class TrainingCompanyEditComponent extends BaseAdminEditComponent implements OnInit, OnDestroy {
// Class TrainingCompanyEditComponent incorrectly extends base class BaseAdminEditComponent, types have seperate declarations of private property 'alert'
constructor(
private alert: AlertService,
private trainingCompanyService: TrainingCompanyService
) {
// alert instead of this.alert
super(alert);
}
}
export class BaseAdminEditComponent {
constructor(private alert: AlertService) {
}
protected handleSaveError(error: any) {
if (error.message) {
if (error.errors && _.isArray(error.errors) && error.errors.length > 0) {
this.alert.error(_.join(error.errors, '\n'), error.message);
}
else {
this.alert.error(error.message);
}
}
}
}
Refactored Components (V3)
This approach works, but is it the most effective technique?
@Component({
selector: 'wk-training-company-edit',
template: require('./edit.html')
})
export class TrainingCompanyEditComponent extends BaseAdminEditComponent implements OnInit, OnDestroy {
// Class TrainingCompanyEditComponent incorrectly extends base class BaseAdminEditComponent, types have seperate declarations of private property 'alert'
constructor(
private alert: AlertService,
private trainingCompanyService: TrainingCompanyService
) {
// alert instead of this.alert
super(alert);
}
}
export class BaseAdminEditComponent {
// Create a private variable with a different name, e.g. alert2
private alert2: AlertService;
constructor(alert: AlertService) {
this.alert2 = alert;
}
protected handleSaveError(error: any) {
if (error.message) {
if (error.errors && _.isArray(error.errors) && error.errors.length > 0) {
this.alert2.error(_.join(error.errors, '\n'), error.message);
}
else {
this.alert2.error(error.message);
}
}
}
}