如何使用新的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 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,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)
Class TrainingCompanyEditComponent incorrectly extends base class BaseAdminEditComponent,types have seperate declarations of private property ‘alert’
@Component({
selector: 'wk-training-company-edit',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,error.message);
}
else {
this.alert.error(error.message);
}
}
}
}
重构组件(V3)
This works,just wondering if it is the best technique
@Component({
selector: 'wk-training-company-edit',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,error.message);
}
else {
this.alert2.error(error.message);
}
}
}
}
只需将派生类中构造函数参数的访问修饰符设置为与基类中相同的级别.即
基类
import * as _ from "lodash";
import {AlertService} from '../common/alert/alert.service';
export class BaseAdminEditComponent {
constructor(protected alert: AlertService) { }
protected handleSaveError(error: any) {
if (error.message) {
if (error.errors && _.isArray(error.errors)) {
console.error(error.errors);
}
this.alert.error(error.message);
}
}
}
派生类
@Component({
selector: 'wk-training-company-edit',template: require('./edit.html')
})
export class TrainingCompanyEditComponent extends BaseAdminEditComponent {
trainingCompany: TrainingCompany;
trainingCompanyId: number;
constructor(
protected alert: AlertService,private validation: ValidationService,private trainingCompanyService: TrainingCompanyService) {
super(alert);
// Other Constructor Code Here
}
}
