Angular2访问子模块组件答案

【问题标题】：Angular2 access submodule componentAngular2访问子模块组件
【发布时间】：2017-03-02 21:36:48
【问题描述】：

我有一个带有子模块的 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 导入时，它可以工作。

难道不能访问子模块的组件吗？我做错了什么？

【问题讨论】：

标签： angular import module components

【解决方案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

还要注意一个组件只能属于一个模块。

【讨论】：

这是否意味着如果我有一个模块A 有两个子模块B 和C，如果我在模块B 中导出B 组件A，它不能在模块中使用C?
您可能指的是“一个组件只能属于一个模块”的陈述 - 这是真的。这意味着组件 x 可以“属于”（出现在 declarations 中）模块 A、B 或 C。但这与能够使用它无关——在另一个模块，您导入导出组件x 的模块。假设您要使用在模块 B 中声明的组件。您从 B 导出它，并在模块 A 和 C 中导入模块 B。
遇到了同样的问题，应用了这个修复程序并且它起作用了。但是，为什么要在exports 中复制declarations？这是性能优化吗？
@AdrianMoisa，例如，您可能希望在模块内部拥有一些组件 - 在这种情况下，您不会将它们添加到 exports，这就是为什么会有单独的属性的原因之一。
@RonaldZarīts 你的意思是类似于类方法的公共/私有？