Question

我是Angular的新手。我试图通过组件类继承基类。基类看起来像这样。

export class QuestionBase<T>{
  value?: T;
  key?: string;
  label?: string;
  required?: boolean;
  order?: number;
  controlType?: string;


  constructor(options: {
      value?: T,
      key?: string,
      label?: string,
      required?: boolean,
      order?: number,
      controlType?: string
    } = {}) {
    this.value = options.value;
    this.key = options.key || '';
    this.label = options.label || '';
    this.required = !!options.required;
    this.order = options.order === undefined ? 1 : options.order;
    this.controlType = options.controlType || '';
  }
}

我的组件看起来像这样。

    import { Component, Input, forwardRef, Inject, Injectable, Optional  } from '@angular/core';
    import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
    import { QuestionBase, controlMetaData } from './question-base';

    @Component({
      selector: 'checkbox-control',
      templateUrl: './question-checkbox-component.html',
      providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          useExisting: forwardRef(() => CheckboxControlComponent),
          multi: true
        }
      ]
    })

    export class CheckboxControlComponent extends QuestionBase<string> implements ControlValueAccessor { 
      controlType = 'checkbox';
      checkboxState = false;
      constructor(options: {} ={})  { 
         super(options);

      }
     writeValue(value: boolean ){
       this.checkboxState = value;    
     }
    registerOnChange(fn: any){

    }
    registerOnTouched(fn: any){

   }
}

抛出错误：无法解析CheckboxControlComponent的所有参数:(？）。

但是当我尝试通过下面的另一个类继承基类时，它工作正常。

import { QuestionBase } from './question-base';

export class TextboxQuestion extends QuestionBase<string> {
  controlType = 'textbox';
  type: string;

  constructor(options: {} = {}) {
    super(options);
    this.type = options['type'] || '';
  }
}

请告诉我这里出了什么问题。

Answer 1

如果子类有构造函数，则需要重复超类的所有构造函数参数并将它们转发给超类构造函数。 TypeScript或Angular DI不会自动合并它们。

Angulars DI也需要知道参数的类型。您不会在Angular中自己实例化组件实例，DI会为您执行此操作。因为DI需要能够为参数提供值。

因此，这不是有效的组件构造函数参数类型：

{
  value?: T,
  key?: string,
  label?: string,
  required?: boolean,
  order?: number,
  controlType?: string
}

Angular 4：无法按组件类

1 个答案: