Angular2组件在多个模块中声明

Question

我的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”是两个模块的声明之一： RepairReturnModule 和 AppModule

我从 RepairreturnModule 的声明中移除了 SpinnerComponent，然后出现了以下错误：

未处理的 Promise 拒绝：模板解析错误：无法绑定到“isRunning”，因为它不是“spinner-component”的已知属性。 1. 如果“spinner-component”是 Angular 组件并具有“isRunning”输入，则验证它是否属于此模块。 2. 如果“spinner-component”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schema”中，以抑制此消息。... 这表明它没有被声明。

我错过了什么？

- Don Chambers

---

你尝试过将SpinnerComponent放在它自己的模块中，然后再将该模块导入到其他两个模块中吗？ - Shawn Flahave

我建议创建一个共享模块，其中包含SpinnerComponent。在这两个模块中导入此模块。 - saurabh seth

Answer 1

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

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

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

...

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

... ```

- sdemoor

Answer 2

看到完整的代码会更有帮助，但不管怎样...

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

- rook

---

既然它被广泛使用，我认为我可以将它放在主要的app.module中。我已经有了一个共享模块，所以我按照你的建议把它放在那里。 - Don Chambers

是的，你不能从根应用程序模块导入，但根模块可以从其他模块导入。 - rook

Answer 3

您还可以将SpinnerComponent保留在RepairReturnModule中，因为这个模块已经被导入到主应用程序模块中，但也需要将其添加到该模块的“exports”数组中。完成后，只需从App模块的声明中删除它即可。

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

- Luis Cazacu