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 Ydirectives数组不包含ZComponent因为YModule没有导入ZModule其传递模块在exportedDirectives数组中包含ZComponent。 -
在
XComponent模板中，我们可以使用ZComponent因为Transitive module X具有包含ZComponent指令数组，因为XModule导入导出导出模块（ZModule）的模块（ZModule）（ZModule），导出指令ZComponent -
在
AppComponent模板中，我们不能使用XComponent因为AppModule导入XModule但XModule不会导出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] })
