Angular2在模块中导入组件
Angular2在模块中导入组件
提问于 2017-08-28 07:09:34
我有一个加载屏幕组件，我想在不同的模块中跨不同的组件重用它。
我有一个AppModule
@NgModule ( {
declarations: [
LoadingScreenComponent //has tag app-loading-screen
],
imports: [
ReportsModule,DashboardModule
]
});
export class AppModule {
}在我的ReportsModule里
@NgModule ( {
declarations: [
ReportsComponent
],
});
export class ReportsModule {
}在ReportsComponent html文件中
<app-loading-screen></app-loading-screen>当这样做的时候，我得到了一个错误
'app-loading-screen' is not a known element不同模块中的其他几个组件也需要使用加载屏幕组件。
为什么这失败了，但我已经在根模块中包含了LoadingScreenComponent。或者我该怎么做？
回答 6
Stack Overflow用户
回答已采纳
发布于 2017-08-28 07:31:10
您可以将加载屏幕组件作为共享模块，并导入共享模块，包括应用程序模块和报表模块。
import { NgModule} from '@angular/core';
@NgModule({
imports: [
],
declarations: [
LoadingScreenComponent
],
providers: [
],
exports: [
LoadingScreenComponent
]
})
export class SharedModule { }然后可以在仪表板模块和报表模块中导入共享模块。
Stack Overflow用户
发布于 2017-08-28 07:25:57
LoadingScreenComponent是在AppModule中声明的，但是导入到AppModule的ReportsModule不知道LoadingScreenComponent。您需要重构以使两个模块都具有公共模块，并在那里导入LoadingScreenComponent。
Stack Overflow用户
发布于 2017-08-28 07:29:51
将LoadingScreenComponent添加到AppModule中的导出数组。这将使它能够在全球范围内获得：
@NgModule({
declarations: [
LoadingScreenComponent //has tag app-loading-screen
],
imports: [
ReportsModule,
DashboardModule
],
exports: [
LoadingScreenComponent
]
})
export class AppModule {
}否则，最好的方法是创建一个共享模块并将该模块导入到您希望使用LoadingScreenComponent的任何其他模块中。
import { NgModule } from '@angular/core';
import { LoadingScreenComponent } from '...'; //Path to the LoadingScreenComponent
@NgModule({
declarations: [
LoadingScreenComponent
],
exports: [
LoadingScreenComponent
]
})
export class SharedModule { }并将其导入其他模块，如下所示：
import { SharedModule } from '...'; //Path to the SharedModule
@NgModule({
declarations: [
ReportsComponent
],
imports[
SharedModule
]
})
export class ReportsModule { }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45913514
复制相关文章
相似问题
腾讯云开发者
