Angular 2使用另一个模块的组件

我有Angular 2(版本2.0.0 – 最终)应用程序生成的angular度cli。

当我创build一个组件并将它添加到AppModule的声明数组中时,这一切都很好,它可以工作。

我决定分离组件,所以我创build了一个TaskModule和一个组件TaskCard 。 现在我想在TaskCard的一个组件( Board组件)中使用AppModule

的AppModule:

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { BoardComponent } from './board/board.component'; import { LoginComponent } from './login/login.component'; import { MdButtonModule } from '@angular2-material/button'; import { MdInputModule } from '@angular2-material/input'; import { MdToolbarModule } from '@angular2-material/toolbar'; import { routing, appRoutingProviders} from './app.routing'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { UserService } from './services/user/user.service'; import { TaskModule } from './task/task.module'; @NgModule({ declarations: [ AppComponent, BoardComponent,// I want to use TaskCard in this component LoginComponent, PageNotFoundComponent ], imports: [ BrowserModule, FormsModule, HttpModule, MdButtonModule, MdInputModule, MdToolbarModule, routing, TaskModule // TaskCard is in this module ], providers: [UserService], bootstrap: [AppComponent] }) export class AppModule { } 

TaskModule:

 import { NgModule } from '@angular/core'; import { TaskCardComponent } from './task-card/task-card.component'; import { MdCardModule } from '@angular2-material/card'; @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], providers: [] }) export class TaskModule{} 

整个项目可在https://github.com/evgdim/angular2 (看板文件夹)

我错过了什么? 我必须做什么来使用TaskCardComponent中的BoardComponent

尝试导出它:

 @NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] <== this line }) export class TaskModule{} 

我应该输出什么?

导出其他模块中的组件应该能够在其模板中引用的可声明类。 这些是你的公开课。 如果您不导出类,则它将保持私有状态,仅在此模块中声明的其他组件才可见。

一分钟你创build一个新的模块,懒惰或不,任何新的模块,你声明任何东西,这个新的模块有一个干净的状态 (正如病房贝尔说在https://devchat.tv/adv-in-angular/119 -aia-avoid-common-pitfalls-in-angular2 )

Angular为每个@NgModule创build传递模块

该模块收集从另一模块导入的指令(如果导入模块的传递模块已导出指令)或在当前模块中声明的指令

当angular度编译属于模块X模板时,使用在X.transitiveModule.directives中收集的指令

 compiledTemplate = new CompiledTemplate( false, compMeta.type, compMeta, ngModule, ngModule.transitiveModule.directives); 

https://github.com/angular/angular/blob/4.2.x/packages/compiler/src/jit/compiler.ts#L250-L251

在这里输入图像说明

这样按照上面的图片

  • YComponent不能在其模板中使用ZComponent ,因为Transitive module Y directives数组不包含ZComponent因为YModule没有导入ZModule其传递模块在exportedDirectives数组中包含ZComponent

  • XComponent模板中,我们可以使用ZComponent因为Transitive module X具有包含ZComponent指令数组,因为XModule导入导出导出模块( ZModule )的模块( ZModule )( ZModule ),导出指令ZComponent

  • AppComponent模板中,我们不能使用XComponent因为AppModule导入XModuleXModule不会导出XComponent

也可以看看

  • 为什么懒加载模块必须导入commonModule? angular2

  • Angular模块常见问题

  • 声明,提供者和导入在NgModule之间有什么区别

你必须从你的NgModule export它:

 @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule], providers: [] }) export class TaskModule{} 

无论你想从另一个模块使用什么,只要把它放在出口数组 。 喜欢这个-

  @NgModule({ declarations: [TaskCardComponent], exports: [TaskCardComponent], imports: [MdCardModule] })