从 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, OnInit, Input, Output, 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() {
}
...
}
关于angular - 错误 : Template parse errors: Can't bind to 'myProperty' since it isn't a known property of 'myComponent' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41714563/