Angular2在模块中导入组件

我有一个加载屏幕组件，我希望在不同模块中的不同组件之间重用。Angular2在模块中导入组件

我有一个的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。或者我该怎么办呢？

来源

2017-08-28 GEOFFREY MWANGI

能否请您提供的LoadingScreenComponent的代码呢？ –

组件只有一个文本显示正在加载。 –

创建一个共享模块并声明，导出LodingScreenModule，然后添加AppModule和ReportsModule。 – Sreemat

你可以做装载仪屏幕组件作为共享模块和你进口共享模块都应用模块和报表模块

import { NgModule} from '@angular/core'; 
@NgModule({ 
imports: [ 
], 
declarations: [ 
LoadingScreenComponent 
], 
providers: [ 

], 
exports: [ 
    LoadingScreenComponent 
] 
}) 
export class SharedModule { }

然后你既可以仪表盘模块和报表模块

来源

2017-08-28 07:31:10 Robert

将bootstrap: [ LoadingScreenComponent ]添加到您的NgModule。

编辑

@NgModule ({ 
    declarations: [ 
    LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
    ReportsComponent,DashboardModule 
    ], 
    bootstrap: [ LoadingScreenComponent ] 

    }); 
export class AppModule { 
}

而且在指数是什么定义呢？

正常情况下，您将报表html添加到您的主要组件而不是其他方式。

来源

2017-08-28 07:22:48 Swoox

LoadingScreenComponent在AppModule中声明，但导入到AppModule的ReportsModule不知道LoadingScreenComponent。您需要重构为其创建通用模块并在其中导入LoadingScreenComponent。

来源

2017-08-28 07:25:57 Vega

感谢解决它，示例代码已提供由@robert下面。 –

请在您的LoadingScreenComponent中包含选择器，如下所示。选择器将用于应用组件

import { 
    Component 
} from '@angular/core'; 

@Component({ 
    selector: 'app-loading-screen', 
    templateUrl: 'loading-screen.component.html' 
}) 

export class LoadingScreenComponent {}

来源

2017-08-28 07:28:26

其生成元件后已包含有角度cli –

添加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 { }

来源

2017-08-28 07:29:51

在导入共享模块创建其他模块中的这样一个共享模块和进口。

shared.module.ts

@NgModule({ 
     imports: [ 
      //If needed 
     ], 
     declarations: [ 
      LoadingScreenComponent 
     ], 
     exports:[LoadingScreenComponent] 
}) 
export class SharedModule {}

在的AppModule

@NgModule ({ 
    imports: [ 
    SharedModule 
    ] 
    }); 
export class AppModule {}

在ReportModule

@NgModule ({ 
    declarations: [ 
    SharedMoudule, 
    ReportsComponent 
    ], 
    }); 
export class ReportsModule {}

来源

2017-08-28 07:39:44 Sreemat

Angular2在模块中导入组件

回答

相关问题