错误：模板解析错误：无法绑定到“myProperty”，因为它不是“myComponent”的已知属性答案

【问题标题】：Error: Template parse errors: Can't bind to 'myProperty' since it isn't a known property of 'myComponent'错误：模板解析错误：无法绑定到“myProperty”，因为它不是“myComponent”的已知属性
【发布时间】：2017-06-02 13:04:39
【问题描述】：

从 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

【问题讨论】：

您的代码中在哪里使用myProperty？您问题中的代码没有提及。
这里用了myProperty和myComponent在哪里？
对不起，myComponent = placeFilter 和 myProperty = center

标签： angular typescript webpack

【解决方案1】：

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



    constructor() {

    } 
...
}

【讨论】：

属性不支持吗？如果我将它从属性更改为变量似乎有效。但我必须改变我所有的属性......不好
我也有这样的代码：@Input() set selectedLayers(selectedLayers: Array) { this._selectedLayers = selectedLayers; if (selectedLayers != null) { this.selectedLayersChange(this.selectedLayers); } } 如果没有属性，我怎么能做到这一点？
角度 6 上的“重复标识符”。您可以将代码分为前后两个块吗？

【解决方案2】：

有时我们忘记检查一些基本的东西，这发生在我的Angular 应用程序中。我使用命令ng g c audio-element 创建了一个新组件，并在另一个组件中使用了它们。

<!--AUDIO-->
<div *ngIf="theWorksheetElement?.type === 7" class="fill">
    <audio-element [worksheetElement]="theWorksheetElement" [style.pointer-events]="isResizing ? 'none' : 'auto'"></audio-element>
</div>

而且我总是收到如下错误。

ERROR 错误：未捕获（承诺）：错误：模板解析错误：无法绑定到“worksheetElement”，因为它不是 '音频元素'。 1. 如果'audio-element'是一个Angular组件并且它有'worksheetElement'输入，那么验证它是这个模块的一部分。 2. 如果“audio-element”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中禁止显示此消息。

我确定我已将此组件添加到我的相关模块中。现在来有趣的部分我的选择器在组件打字稿文件中有所不同。

@Component({
  selector: 'app-audio-element',
  templateUrl: './audio-element.component.html',
  styleUrls: ['./audio-element.component.scss']
})

我将app-audio-element 更改为audio-element，然后它开始按预期工作。只是为可能遇到同样问题的人分享。

【讨论】：