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

当我尝试从我的应用程序模块的模板访问 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

另请注意，一个组件只能属于一个模块。