NgModelのカスタムコンポーネントがスローされました：CustomInputComponentのプロバイダがありません

Question

私はちょうどAngular 2の学習を開始しましたが、NgModelでカスタムコンポーネントを使用しようとしています。私は他のコンポーネントで再利用するselectコンポーネントを作成しましたが、これを選択した値に渡す必要があります。

私はこの作業例をPlunkerからコピーしました。

しかし、私はそれを使用しようとすると、私はメッセージを取得：

No provider for CustomInputComponent 

これは、カスタムコンポーネントtypescriptですです：

import { Component, Inject, Output, EventEmitter, forwardRef } from '@angular/core'; 
import { Http, RequestOptions, Headers } from '@angular/http'; 
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 
import { ILaw } from '../../interfaces/law.interface'; 

const noop =() => { 
}; 

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => CustomInputComponent), 
    multi: true 
}; 

@Component({ 
    selector: 'law', 
    templateUrl: './law.component.html', 
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR] 
}) 

export class LawComponent { 
    public laws: ILaw[]; 
    public selectedLaw: number; 

    @Output() 
    notifyParent: EventEmitter<number> = new EventEmitter<number>(); 

    constructor(private http: Http, 
     @Inject('BASE_URL') private baseUrl: string) { 

     http.get(baseUrl + 'api/Law').subscribe(result => { 
      this.laws = result.json() as ILaw[]; 
      console.log(this.laws); 
     }, error => console.error(error)); 
    } 

    lawChanges() { 
     console.log("selected law: " + this.selectedLaw); 
     this.notifyParent.emit(this.selectedLaw); 
    } 
} 

export class CustomInputComponent implements ControlValueAccessor { 

    //The internal data model 
    private innerValue: any = ''; 

    //Placeholders for the callbacks which are later provided 
    //by the Control Value Accessor 
    private onTouchedCallback:() => void = noop; 
    private onChangeCallback: (_: any) => void = noop; 

    //get accessor 
    get value(): any { 
     return this.innerValue; 
    }; 

    //set accessor including call the onchange callback 
    set value(v: any) { 
     if (v !== this.innerValue) { 
      this.innerValue = v; 
      this.onChangeCallback(v); 
     } 
    } 

    //Set touched on blur 
    onBlur() { 
     this.onTouchedCallback(); 
    } 

    //From ControlValueAccessor interface 
    writeValue(value: any) { 
     if (value !== this.innerValue) { 
      this.innerValue = value; 
     } 
    } 

    //From ControlValueAccessor interface 
    registerOnChange(fn: any) { 
     this.onChangeCallback = fn; 
    } 

    //From ControlValueAccessor interface 
    registerOnTouched(fn: any) { 
     this.onTouchedCallback = fn; 
    } 
} 

とそのHTML：

<select [(ngModel)]="value" (change)="lawChanges()"> 
    <option></option> 
    <option *ngFor="let law of laws" [value]="law.lawId">{{law.name}}</option> 
</select> 

そして、ここで私がlawコンポーネントを使用しています：

<law (notifyParent)="getNotification($event, rowIndex)" [(ngModel)]="productionorder.lawId"></law> 

私は検索してきましたが、役に立たないものはありませんでした。これは非常に簡単ではないようです（見つけたサンプルが非常に複雑であるため、 ）。

私はlawコンポーネントを他のコンポーネントで問題なく使用していましたが、今度は選択した値を新しいコンポーネントに渡す必要があります。 app.module.shared.tsにも登録されています。

なぜ機能しないのですか？

Answer 1

私はあなたがapp.module.tsでこのコンポーネントを登録願って、あなたのCustomInputComponent@Componentとデコレータ