Angular 2.3组件继承和依赖注入

发布时间：2020-12-17 08:33:49 所属栏目：安全来源：网络整理

导读：如何使用新的Angular 2.3组件继承在子组件和父组件之间共享依赖项注入. 例如我想将AlertService向下移动到父组件中,并将TraingCompanyService保留在派生组件中当前组件 @Component({ selector: 'wk-training-company-edit',template: require('./edit.html'

如何使用新的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
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!