Angular2访问子模块组件

Question

我有一个带子模块的Angular2应用程序:

????app (module)                                 
?   ????authentication (module)                 
?   ?   ????components                  
?   ?   ?   ????login                   
?   ?   ?   ????sign-in                 
?   ?   ?   ????sign-up                 
?   ?   ?   ????socials-callback        
?   ?   ?   ????socials-sign-in         
?   ?   ????models                      
?   ?   ????services                    
?   ????components                      
?   ?   ????nav-bar                     
?   ????home (module)                           
?   ????shared (module)                          
?   ?   ????components                    
?   ?   ?   ????search-dropdown         
?   ?   ????services                    
?   ????user (module)                             
?       ????models                      
?       ????services                     

每个组件都在module_name.module.ts文件(其模块)中声明.每个模块文件都导入到app.module.ts文件中.

这是我的app.module.ts档案:

import { BrowserModule } from '@angular/platform-browser';
import ...

import { SharedModule }    from './shared/shared.module';

@NgModule({
  imports: [
    AppRoutingModule,
    ...
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的shared.module.ts档案:

import { NgModule } from '@angular/core';
import ...

import { SearchDropdownComponent } from './components/search-dropdown/search-dropdown.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SearchDropdownComponent
  ]
})
export class SharedModule { }

当我尝试从我的app模块的模板访问SearchDropdownComponent时,我有一个错误告诉我没有与之对应的组件.

但是当我直接在我的app.module.ts文件中添加SearchDropdownComponent导入时,它可以工作.

是否可以访问子模块的组件？我做错了什么？

Answer 1

要在模块外部创建组件,请将模块的exports声明添加到模块中.

import { NgModule } from '@angular/core';
import ...

import { SearchDropdownComponent } from './components/search-dropdown/search-dropdown.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SearchDropdownComponent
  ],
  exports: [
    SearchDropdownComponent
  ]
})
export class SharedModule { }

API参考:NgModule.exports

另请注意,组件只能属于一个模块.