gpt4 book ai didi

Angular 2.3 组件继承和依赖注入(inject)

转载 作者:太空狗 更新时间:2023-10-29 17:12:03 26 4
gpt4 key购买 nike

如何使用新的 Angular 2.3 组件继承在子组件和父组件之间共享依赖注入(inject)。

例如我想将 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, 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)

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);
}
}
}
}

重构组件 (V3)

This works, just wondering if it is the best 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);
}
}
}

}

最佳答案

只需在派生类中将构造函数参数的访问修饰符设置在与基类相同的级别即可。即

基类

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
}
}

关于Angular 2.3 组件继承和依赖注入(inject),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41560550/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com