Angular can'；无法绑定到输入变量，因为它是'；t组件的已知属性

我用的是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
}

// 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 { }

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

类型LabelSpanComponent是两个模块声明的一部分： ThisDetailModule和ThatDetailModule！请考虑搬家 LabelSpanComponent到导入的更高模块 ThisDetailModule和ThatDetailModule。您还可以创建一个 导出并包含LabelSpanComponent然后导入的新模块 该模块包含在ThisDetailModule和ThatDetailModule中

因此，我决定我应该为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.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.如果“标签范围”是一个角度组件，并且有“输入”输入，则验证它是否是该模块的一部分

啊，值得一提的是，以下是如何在html页面中使用它：

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

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

myVar={labelValue:“标签”，spanValue:“Span”}

---

我遗漏了什么或做错了什么？

您需要导出组件

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

---

查看文档上的共享模块部分以获取有用信息：

如果使用了错误的组件名称，也可能发生这种情况。比如说你有

<app-my-component [myProperty]="helloWorld"></app-my-component>

---

请注意，@组件中缺少app-。它会说它不知道属性，但实际上它是一个未知组件。

您的组件不需要单独的模块。但是，无论它是哪个模块的一部分，都必须导入到您的目标模块中，还必须在包含该组件的模块的“声明”部分中提及该组件。当我从项目中删除标签span.module.ts，并将LabelSpanComponent添加到app.module.ts的声明中时，在绑定到“entry”时，我会收到相同的错误消息，有时您会错过一些简单的事情。谢谢@Machtyn恰巧发生在我们之中：-）另外，从除App.module之外的所有模块中删除

BrowserModule

。对于子模块，仅使用

commomModule

。看见