Angular2 组件在多个模块中声明答案

【问题标题】：Angular2 Component declared in multiple modulesAngular2 组件在多个模块中声明
【发布时间】：2018-04-14 19:40:27
【问题描述】：

我的 Angular2 RC6 应用程序有两个模块，我不确定如何声明共享组件。

我有一个在整个应用程序中使用的名为 spinnerComponent 的组件。我在 app.modules.as 中定义了它：

@NgModule({
    imports: [BrowserModule, routing,RepairReturnModule],
    providers: [ ],
    declarations: [AppComponent,SpinnerComponent],
    bootstrap: [AppComponent]
})

然后在 RepairreturnModule 中我再次将其定义为：

@NgModule({
    imports: [CommonModule],
    declarations: [
        SpinnerComponent
    ],
    providers: []
})

不出所料，我得到：

类型 SpinnerComponent 是 2 个模块声明的一部分： RepairReturnModule 和 AppModule

我从 RepairreturnModule 的声明中删除了 SpinnerComponent，然后我得到：

未处理的 Promise 拒绝：模板解析错误：无法绑定到 'isRunning' 因为它不是 'spinner-component' 的已知属性。 1. 如果 'spinner-component' 是一个 Angular 组件并且它有 'isRunning' 输入，那么验证它是这个模块的一部分。 2. 如果 'spinner-component' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schema' 压制此消息。 ...这表明它没有被声明。

我错过了什么？

【问题讨论】：

你有没有试过把 SpinnerComponent 放在它自己的模块中，然后将那个模块导入到另外两个模块中？
我建议创建一个包含 SpinnerComponent 的共享模块。在两个模块中导入此模块。

标签： angular

【解决方案1】：

将exports: [SpinnerComponent] 添加到您的 app.modules NgModules 装饰器中。

参考：https://angular.io/docs/ts/latest/guide/architecture.html，

``` NgModule 是一个装饰器函数，它接受一个元数据对象，其属性描述了模块。最重要的属性是：

...

exports - 应该在其他模块的组件模板中可见和可用的声明子集。

...

```

【讨论】：

【解决方案2】：

查看完整代码会有所帮助，但无论如何......

您可以尝试将微调器移回修复模块并从那里将其导入应用程序模块。我使用单独的（在您的情况下是第三个）“共享”模块，其中有通用功能，因此每个其他模块都可以从那里导入它。

【讨论】：

因为它无处不在，我想我可以把它放在主 app.module 中。我已经有一个共享模块，所以我只是按照你的建议把它放在那里。
是的，你不能真正从根应用模块导入，但根模块可以从其他模块导入。

【解决方案3】：

您也可以将 SpinnerComponent 留在 RepairReturnModule 中，因为这是在主 App 模块中导入的，但也可以将其添加到模块的“exports”数组中。在此之后，只需将其从 App 模块的声明中删除。

https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-what-to-export

【讨论】：