2017-07-12 7 views
2

私はAngularを初めて使用しています。私は、コンポーネントクラスによって基本クラスを継承しようとしています。基本クラスは次のようになります。角4:コンポーネントクラス別にベースクラスを継承できません

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'] || ''; 
    } 
} 

ここで間違っていることを教えてください。

+0

あなたが 'あなたのコンポーネントでoptions'を提供するにはどうすればよいですか? DIメカニズムのトークンでなければなりません。角度はコンストラクタパラメータのタイプについての情報を読み取ります – yurzui

+0

バレルを使用している場合は、バレルを削除してください。この[質問](https://stackoverflow.com/questions/37997824/angular-2-di-error-exception-cant-resolve-all-parameters)をご覧ください。 –

答えて

0

サブクラスにコンストラクタがある場合は、スーパークラスのすべてのコンストラクタパラメータを繰り返しスーパークラスコンストラクタに転送する必要があります。 TypeScriptまたはAngular DIは自動的にそれらをマージしません。

また、パラメータのタイプをAngulars DIに知らせる必要があります。 コンポーネントインスタンスをAngularでインスタンシエートすることはできません.DIはそれを行います。それに対して、DIはパラメータの値を思い付くことができる必要があります。したがって、

これは有効なコンポーネントのコンストラクタのパラメータの型ではありません。

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

私の限られた知識のため申し訳ありません。しかし、私はそれがそうであるようにbaseclassを保持したい場合。どのように私はDIを作ることができます。有効なパラメータタイプにするにはどうすればいいですか?私のコードでうまくいきますか? – rajesh

+0

その型にマッチするクラスを作成し、 '@Injectable()'デコレータを追加してどこかに提供する必要があります。詳細については、https://angular.io/guide/dependency-injectionを参照してください。 –

関連する問題