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
}

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：“The Label”，spanValue：“The Span”}

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

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

Answer 2

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

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

但是在选择器中，您只有：

@Component({
    selector : 'my-component'
})

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

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

2 个答案: