無法綁定到“控件”，因為它不是（myComponent）的已知屬性

Question

這是我的app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from '@angular/http';
import { AppComponent }  from './app.component';
// import { CountryDetailsComponent} from './country-detail.component';
// import { LandingPageComponent} from './landing-page.component';
import { routing } from './app.routing'
import { TypeaheadModule } from 'ng2-bootstrap/components/typeahead';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TabsModule } from 'ng2-bootstrap/ng2-bootstrap';
import { CollapseModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';


@NgModule({
    imports:      [ BrowserModule, HttpModule, routing, FormsModule, ReactiveFormsModule, TypeaheadModule, TabsModule, CollapseModule, AlertModule],
    declarations: [ AppComponent ],
    providers: [],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

我有這個angular2組件：

從'../error-messages.component'導入{ErrorMessagesComponent}; 從“ ../validation.component”導入{ValidationComponent}； 從“ ../gas-type”導入{GasType}；

export class CountryDetailsComponent extends LoadingPage implements OnInit {
  countryName: string;
  productionForm: FormGroup;

..
}

和

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ValidationComponent } from './validation.component';

@Component({
  selector: 'error-messages',
  template: `<div style="color:#E82C0C; margin: 6px 0;" *ngIf="errorMessage !== null">{{errorMessage}}</div>`
})
export class ErrorMessagesComponent {
  @Input() control: FormControl;
  constructor() { }

和模板country-details.component.html ：

              <div class="col-lg-10 ">
                <input class="price-format form-control" type="text"
                       [formControl]="productionForm.controls.priceFormat"
                       [(ngModel)]="productionConfig.priceFormat"
                       id="inputPriceFormat"
                       name="priceFormat">
                <error-messages [control]="productionForm.controls.priceFormat"></error-messages>
              </div>

但我得到這個錯誤：

Can't bind to 'control' since it isn't a known property of 'error-messages'.
1. If 'error-messages' is an Angular component and it has 'control' input, then verify that it is part of this module.
2. If 'error-messages' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("nputPriceFormat"
                           name="priceFormat">
                    <error-messages [ERROR ->][control]="productionForm.controls.priceFormat"></error-messages>
                  </div>
          "): b@43:36

我該如何解決？

Answer 1

該組件需要使用@NgModule()注冊

declarations: [ AppComponent, ErrorMessageComponent ],