Angular 2 组件未加载到不同的模块中
Posted
技术标签:
【中文标题】Angular 2 组件未加载到不同的模块中【英文标题】:Angular 2 Component not loading in different module 【发布时间】:2017-12-22 15:40:18 【问题描述】:我正在构建一个具有根模块的应用程序,然后在此模块下是 3 个子模块。在模块 1 中,有一个可以在模块 3 中重用的组件,但是,如果我直接访问模块 3 中的组件 URL,则永远不会加载该组件(我认为这是因为模块 1 没有加载)。我已经尝试从模块 1 中导出组件并在根模块中引导它,但是我收到一个错误,提示找不到组件选择器
---编辑---
根模块
@NgModule(
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ManagerModule,
LogadoModule,
GeralModule,
RouterModule.forRoot(routes, useHash: true)
],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
模块 1
@NgModule(
declarations: [
GeralComponent,
GeralHeaderComponent,
LoginComponent,
AtividadesListagemComponent // -> COMPONENT TO BE SHARED
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
GeralRoutingModule
],
providers: [GeralService],
exports: [GeralComponent],
bootstrap: [GeralComponent]
)
export class GeralModule
模块 3 // -> 在这个模块中使用共享组件
@NgModule(
declarations: [
LogadoComponent,
AtividadesInscritoComponent,
LogadoHeaderComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
LogadoRoutingModule
],
providers: [],
exports: [LogadoComponent],
bootstrap: [LogadoComponent]
)
export class LogadoModule
项目结构为:
根模块 模块 1 模块 2 模块 3
----编辑 2 -----
共享模块
@NgModule(
imports: [CommonModule],
exports : [
CommonModule,
AtividadesListagemComponent
],
declarations: [AtividadesListagemComponent]
)
export class SharedModule
根模块
@NgModule(
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ManagerModule,
LogadoModule,
GeralModule,
RouterModule.forRoot(routes, useHash: true)
],
providers: [],
bootstrap: [AppComponent]
)
export class AppModule
模块 1
@NgModule(
declarations: [
GeralComponent,
GeralHeaderComponent,
LoginComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
GeralRoutingModule,
SharedModule
],
providers: [GeralService],
exports: [GeralComponent],
bootstrap: [GeralComponent]
)
export class GeralModule
模块 3
@NgModule(
declarations: [
LogadoComponent,
AtividadesInscritoComponent,
LogadoHeaderComponent
],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
LogadoRoutingModule,
SharedModule
],
providers: [],
exports: [LogadoComponent],
bootstrap: [LogadoComponent]
)
export class LogadoModule
【问题讨论】:
请提供一些代码以便我们查看。 @DeborahK 完成 :) 【参考方案1】:当您有一个需要跨多个模块共享的组件时,推荐的方法是将该组件添加到SharedModule
,然后将该共享模块导入任何需要它的模块中。
在本例中,StarComponent 由多个模块共享:
import NgModule from '@angular/core';
import CommonModule from '@angular/common';
import FormsModule from '@angular/forms';
import StarComponent from './star.component';
@NgModule(
imports: [ CommonModule],
exports : [
CommonModule,
FormsModule,
StarComponent
],
declarations: [ StarComponent ],
)
export class SharedModule
这是 Product 模块如何导入它的:
import NgModule from '@angular/core';
import RouterModule from '@angular/router';
import ProductListComponent from './product-list.component';
import ProductDetailComponent from './product-detail.component';
import SharedModule from '../shared/shared.module';
@NgModule(
imports: [
SharedModule,
RouterModule.forChild([
path: '', component: ProductListComponent ,
path: ':id', component: ProductDetailComponent
])
],
declarations: [
ProductListComponent,
ProductDetailComponent
]
)
export class ProductModule
我这里有完整的示例代码:https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final
【讨论】:
不行!我发布了一个新的更新,你能帮我弄清楚发生了什么吗? 我很抱歉......你是绝对正确的!我的路线有问题,但你的回答是正确的以上是关于Angular 2 组件未加载到不同的模块中的主要内容,如果未能解决你的问题,请参考以下文章