我怎样才能从懒惰的路线使用在我的核心模块中定义的组件？

Question

我有一个组件，我想在整个应用程序的几个地方重用它。因此，我在我的核心模块中用新组件创建了一个模块。我得到的错误是 'foo' is not a known element。

您可以看到一个演示 here。您将在 app/core/foo/foo.component.ts 中看到我希望共享模块的组件，该组件已导入到 CoreModule 中。您会看到 FooComponent（使用选择器 foo）被用于 app/crisis/crisis-list.component.ts。

我已经把 Angular 2 模块的文档读个没完没了，想不通为什么我不能随心所欲地使用 FooComponent。

我错过了什么？

Answer 1

你应该像这样在 CrisisModule 中导入 FooModule；

import { FooModule } from '../core/foo/foo.component';
...
@NgModule({
     imports: [CommonModule, CrisisRoutingModule, FooModule],
     ...
})
export class CrisisModule{}

无论何时你想使用任何组件，只需导入包含组件声明的模块。

Answer 2

你必须选择：

1- 在将要使用它的模块中导入您的模块

2- 在您要使用的模块中声明组件（不是模块）。

但是：

模块方法更好，因为如果你有一个模块在另一个模块中，你不能在两个模块中声明你的组件，但你可以在两个模块中导入模块:!

Answer 3

要使通用组件在各种模块中工作，您必须通过指定 NgModule 的 exports 选项来 export 来自特定模块的 Component，如下所示，以便将作为共享 Component

exports: [CommonComponent] //it will contain the list of shareable Components

然后将该模块注入另一个模块中您要使用公共组件的任何地方。

NOTE: Even you had mentioned CommonComponent to be there inside declartions option of module, it will not allow to use those Components , Pipe's, Directive's in other module directly, to make it work you have to export specific component which should work as shareable.

我怎样才能从懒惰的路线使用在我的核心模块中定义的组件？

How can I use a component that was defined in my core module from a lazy route?

angular2-modules

angular