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

Question

我正在使用角 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
}

标签跨度是：

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

当我在页面上使用它时，这很好用。但是当我尝试在两个不同的页面中使用它时，每个页面都有自己的模块，我收到了一个来自 angular 的错误：

类型 LabelSpanComponent 是 2 个模块声明的一部分：ThisDetailModule 和 ThatDetailModule！请考虑将 LabelSpanComponent 移至导入 ThisDetailModule 和 ThatDetailModule 的更高模块。您还可以创建一个新的 NgModule 来导出并包含 LabelSpanComponent，然后在 ThisDetailModule 和 ThatDetailModule 中导入该 NgModule。

所以，我决定我应该为 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 作为其导入的一部分。但是，我收到以下错误：

无法绑定到“entry”，因为它不是“label-span”的已知属性。1. 如果 'label-span' 是一个 Angular 组件并且它有 'entry' 输入，那么验证它是否是这个模块的一部分。

啊，就其价值而言，以下是它在 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