我有使用 angular-cli 生成的 Angular 2.0.0 应用程序。
当我创建一个组件并将其添加到AppModule的声明数组时,一切都很好,它可以工作。
AppModule
我决定将组件分开,所以我创建了一个TaskModule和一个组件TaskCard。现在我想在(组件)TaskCard的组件之一中使用。AppModule``Board
TaskModule
TaskCard
AppModule``Board
应用模块:
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 { }
任务模块:
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(看板文件夹)上找到
我错过了什么?我需要做什么才能使用TaskCardComponentin BoardComponent?
TaskCardComponent
BoardComponent
这里的主要规则是:
在组件模板编译期间适用的选择器由声明该组件的模块以及该模块导入的导出的传递闭包确定。
所以,尝试导出它:
@NgModule({ declarations: [TaskCardComponent], imports: [MdCardModule], exports: [TaskCardComponent] // <== export the component you want to use in another module }) export class TaskModule{}
我应该出口什么?
导出其他模块中的组件应该能够在其模板中引用的可声明类。这些是你的公开课。如果你不导出一个类,它会保持私有,只对这个模块中声明的其他组件可见。
在您创建新模块的那一刻,无论是否懒惰,任何新模块并在其中声明任何内容,该新模块都会处于干净状态 (正如 Ward Bell 在https://devchat.tv/adv-in-angular/119中所说-aia-避免-常见的陷阱-in- angular2 )
Angular为每个s创建 传递模块。@NgModule
@NgModule
该模块 收集从另一个模块导入的指令(如果导入模块的传递模块具有导出指令)或在当前模块中声明 。
当 Angular 编译属于模块的模板时,X它使用已在 X.transitiveModule.directives 中收集的那些指令。
X
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在其模板中使用,因为directives数组Transitive module Y不包含ZComponent,因为YModule尚未导入ZModule其传递模块包含ZComponent在exportedDirectives数组中。
YComponent
ZComponent
directives
Transitive module Y
YModule
ZModule
exportedDirectives
在XComponent模板中我们可以使用ZComponent因为Transitive module X有指令数组包含ZComponent因为 XModule导入模块(YModule)导出模块(ZModule)导出指令ZComponent
XComponent
Transitive module X
XModule
在AppComponent模板中我们不能使用XComponent,因为AppModule导入XModule但XModule不导出XComponent。
AppComponent
也可以看看
为什么延迟加载的模块必须导入 commonModule? 角 2
Angular 模块常见问题解答
NgModule 中的声明、提供者和导入有什么区别?