如何使用新的Angular 2.3组件继承,在子组件和父组件之间共享依赖注入。
例如,我想将AlertService移到父组件中,而将TraingCompanyService保留在派生组件中。
当前组件
@Component({
selector: 'wk-training-company-edit',
template: require('./edit.html')
})
export class TrainingCompanyEditComponent implements OnInit, OnDestroy {
constructor(
private alert: AlertService,
private trainingCompanyService: TrainingCompanyService
) {
}
}
重构组件(V1)
在派生类的构造函数中调用此函数之前必须先调用super函数。
@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);
}
}
}
}
重构组件(V2)
类TrainingCompanyEditComponent错误地扩展了基类BaseAdminEditComponent,类型具有私有属性'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);
}
}
}
}
重构组件(V3)
这个方法可以用,只是想知道它是否是最佳技术。
@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);
}
}
}
}
super(alert);
吗? - KnowHoper