Question

我正在使用ANgular 2在我当前的项目中实现动态表单系统，到目前为止一直很好，但我发现了以下问题：

我有两个代表表单控件的组件，例如：

    @Component({
  selector: 'app-text-area',
  templateUrl: './text-area.component.html',
  styleUrls: ['./text-area.component.css']
})
export class TextAreaComponent implements OnInit {
  label: string;
  formGroup: FormGroup;
  formControlName: string;
  constructor(private injector: Injector) { }

  ngOnInit() {
    this.label = this.injector.get('label');
    this.formGroup = this.injector.get('formGroup');
    this.formControlName = this.injector.get('formControlName');
  }
}

和

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.css']
})
export class InputTextComponent  implements OnInit{
  label: string;
  formGroup: FormGroup;
  formControlName: string;
  constructor(private injector: Injector) { }

  ngOnInit() {
    this.label = this.injector.get('label');
    this.formGroup = this.injector.get('formGroup');
    this.formControlName = this.injector.get('formControlName');
  }
}

正如你所看到的，除了templateUrl之外，两者都是相同的，它显示了不同的html元素。

所以我想重构代码并创建一个抽象组件来提供公共属性和逻辑，然后使子类继承基类（就像我在使用Java时那样）。所以我创建了这个类：

export class AbstractFormControl implements OnInit {
  label: string;
  formGroup: FormGroup;
  formControlName: string;
  constructor(private injector: Injector) { }

  ngOnInit() {
    this.label = this.injector.get('label');
    this.formGroup = this.injector.get('formGroup');
    this.formControlName = this.injector.get('formControlName');
  }
}

我让子类扩展基类如下：

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.css']
})
export class InputTextComponent  extends AbstractFormControl{

}

但是现在我收到以下错误：

Uncaught Error: Can't resolve all parameters for InputTextComponent: (?).

有人可以向我解释一下这样做的正确方法，或者我做错了什么？

Answer 1

角度依赖注入系统应该知道哪个类型已经传递给构造函数。当您继承组件时，typescript不会保留有关参数private injector的信息。您有两种选择：

1）重复初始化

@Component({
  ...
})
export class InputTextComponent  extends AbstractFormControl{
    constructor(injector: Injector) { super(injector);}
}

但是在你的情况下，你的基类和继承类中有相同数量的参数，这个解决方案似乎是多余的，因为我们可以省略派生类中的构造函数。

如果我们只想使用父类的依赖项，我们可以在派生类中省略构造函数。所以，让我们说我们有如下的父类：

abstract class Parent {
  constructor(private a: string, private b: number) {}
}

我们可以扩展这个类

class Foo extends Parent {
  constructor(a: string, b: number) {
    super(a, b);
  }
}

或

class Foo extends Parent {
}

因为第二个选项会生成像

这样的代码

function Foo() {
   return _super !== null && _super.apply(this, arguments) || this;
}

<强> Plunker Example

2）使用@Injectable作为基类。

@Injectable()
export class AbstractFormControl {

这种方式打字稿会将上面的代码翻译成

AbstractFormControl = __decorate([
    core_1.Injectable(),
    __metadata("design:paramtypes", [core_1.Injector])
], AbstractFormControl);

<强> Plunker Example

和角度反射器可以轻松读取此信息

3）对每个参数使用@Inject()

export class AbstractFormControl implements OnInit {
  constructor(@Inject(Injector) private injector: Injector) { }

Angular 2组件中的继承

1 个答案: