angular – 错误：模板解析错误：无法绑定到’myProperty’,因为它不是’myComponent’的已知属性

从Angular 2.1.0升级到2.4.3后,webpack从2.1.0-beta.25升级到2.2.0-rc.4如果我运行我的webapp,我会发现这个错误(构建工作正常,没有错误)：

Error: Template parse errors: Can't bind to 'center' since it isn't a kNown property of 'placeFilter'.

目前我有一个像这样的中央模型(是的我知道:-)我会在之后更改它)：

import { NgModule }      from '@angular/core';
    import { browserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';

    import { AppRoutingModule } from './app.routes';

    ...
    import {MapComponent} from './map/map/map.component';
   ...
    import {PlaceFilterComponent} from './map/shared/components/placeFilter.component';
    ...

    @NgModule({
        imports: [browserModule,AppRoutingModule,FormsModule,HttpModule],declarations: [...
            MapComponent,...
            PlaceFilterComponent,...
        ],bootstrap: [AppComponent]
    })

    export class AppModule { }

我的MapComponent包含一个名为PlaceFilterComponent的子组件：

import { Component,OnInit,OnDestroy,Input,Output,ngzone  } from '@angular/core';
import { ActivatedRoute,Params,Router} from '@angular/router';
import {Subscription} from "rxjs";
import {TimerObservable} from "rxjs/observable/TimerObservable";

import services

import models

@Component({
    selector: 'emersy-content',templateUrl: './map.component.html',providers: [myServices]
})

export class MapComponent implements OnInit,OnDestroy {
...

    constructor(private placeService: PlaceService,private externalService: ExternalServiceService,private zone: ngzone,private route: ActivatedRoute,private router: Router) {
        ...

        });
    }

   ...
}

这是我的MapComponentTemplate：

<div class="filterBox-map" *ngIf="!onlyMap">
    <place-filter (onSearchLocationChange)="searchLocationChange($event)" (onShowSideBarButtonClick)="showSideBarButtonClick()" [center]="center" [searchTerm]="searchTerm"></place-filter>
</div>

我的PlaceFilter组件是这样的：

import { Component,EventEmitter,ViewChild } from '@angular/core';

import {Center} from '../models/center'

declare var google: any;

@Component({
    selector: 'place-filter',templateUrl: './placeFilter.component.html'
})

export class PlaceFilterComponent {
...
    private _center: Center;    
    get center() {
        return this._center;
    }
    @input() set center(center: Center) {
        this._center = center;
    }



    constructor() {

    } 
...
}

我的文件夹结构是这样的：

app
L app.module.ts
L map
 L map
 | L map.component.ts
 | L map.component.html
 L shared
  L components
    L placefilter.component.ts
    L placefilter.component.html

解决方法

export class PlaceFilterComponent {
...
    private _center: Center;    
    get center() {
        return this._center;
    }
    // try like this 
    @input() center:Center;



    constructor() {

    } 
...
}