angular - 无法绑定(bind)到输入变量，因为它不是组件的已知属性

Question

我使用的是 Angular 2.3。而且，是的，我已经看到了六个左右的其他类似问题，但我无法在其中任何一个中找到解决我的问题的答案。

我有一个名为 LabelSpanComponent 的组件:

// label-span.component.ts
import {Component, Input} from "@angular/core";
import {LabelSpan} from "../models/label-span";

@Component({
    selector: 'label-span',
    template: `
        <label *ngIf="entry.labelValue">{{entry.labelValue}} </label>
        <span>{{entry.spanValue}}</span>`
})
export class LabelSpanComponent {
    @Input() entry: LabelSpan
}

LabelSpan 是:

// label-span.ts
export interface LabelSpan {
    labelValue: string,
    spanValue: string
}

当我在页面上使用它时效果很好。但是当我试图在两个不同的页面中使用它时，每个页面都有自己的模块，我从 Angular 得到了一个错误:

Type LabelSpanComponent is part of the declarations of 2 modules: ThisDetailModule and ThatDetailModule! Please consider moving LabelSpanComponent to a higher module that imports ThisDetailModule and ThatDetailModule. You can also create a new NgModule that exports and includes LabelSpanComponent then import that NgModule in ThisDetailModule and ThatDetailModule.

所以，我决定我应该为 LabelSpanComponent 创建一个模块:

// label-span.module.ts
import {NgModule} from "@angular/core";
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {LabelSpanComponent} from "./label-span.component";

@NgModule({
    imports: [
        FormsModule,
        BrowserModule
    ],
    declarations: [
        LabelSpanComponent
    ],
    providers:    [  ]
})
export class LabelSpanModule { }

然后我将这个模块添加到 app.module.ts:

// app.module.ts
/* other imports */
import {LabelSpanModule} from "./templates/label-span.module";

@NgModule({
    imports: [
        /* other modules */
        LabelSpanModule
    ],
    declarations: [ AppComponent ],
...
})
export class AppModule{ }

在 ThisDetailModule 和 ThatDetailModule 中，我还包括了 LabelSpanModule 作为它们导入的一部分。但是，我收到以下错误:

Can't bind to 'entry' since it isn't a known property of 'label-span'. 1. If 'label-span' is an Angular component and it has 'entry' input, then verify that it is part of this module.

啊，不管它值多少钱，下面是它在 html 页面中的使用方式:

<label-span id="the-id" [entry]="myVar"></label-span>

在页面的组件文件中，我有:

myVar = { labelValue: "标签", spanValue: "跨度"}

我错过了什么或做错了什么？

Answer 1

您需要导出组件

@NgModule({
    imports: [
        FormsModule,
        BrowserModule
    ],
    declarations: [
        LabelSpanComponent
    ],
    exports: [LabelSpanComponent]
    providers:    [  ]
})
export class LabelSpanModule { }

查看文档上的共享模块部分以获取有用信息:https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module