使用另一个模块的组件 [英] Use component from another module
问题描述
我使用 angular-cli 生成了 Angular 2.0.0 应用程序.
当我创建一个组件并将其添加到 AppModule
的声明数组时,一切都很好,它可以工作.
我决定将组件分开,所以我创建了一个 TaskModule
和一个组件 TaskCard
.现在我想在 AppModule
的组件之一(Board
组件)中使用 TaskCard
.
应用模块:
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从'@angular/forms' 导入 { FormsModule };从'@angular/http'导入{HttpModule};从 './app.component' 导入 { AppComponent };从 './board/board.component' 导入 { BoardComponent };从 './login/login.component' 导入 { LoginComponent };从 '@angular2-material/button' 导入 { MdButtonModule };从'@angular2-material/input'导入{MdInputModule};从'@angular2-material/toolbar' 导入 { MdToolbarModule };从'./app.routing'导入{路由,appRoutingProviders};import { PageNotFoundComponent } from './page-not-found/page-not-found.component';从'./services/user/user.service'导入{用户服务};从'./task/task.module'导入{TaskModule};@NgModule({声明: [应用组件,BoardComponent,//我想在这个组件中使用TaskCard登录组件,页面未找到组件],进口:[浏览器模块,表单模块,Http模块,MdButton 模块,Md输入模块,MdToolbar 模块,路由,TaskModule//TaskCard 在这个模块中],提供者:[UserService],引导程序:[AppComponent]})导出类 AppModule { }
任务模块:
import { NgModule } from '@angular/core';从'./task-card/task-card.component'导入{TaskCardComponent};从'@angular2-material/card'导入{MdCardModule};@NgModule({声明:[TaskCardComponent],进口:[MdCardModule],提供者:[]})导出类 TaskModule{}
整个项目可在
按照上图这样
YComponent
不能在其模板中使用ZComponent
因为directives
数组是Transitive module Y
不包含ZComponent
因为YModule
没有在exportedDirectives<中导入其传递模块包含
ZComponent
的ZModule
/code> 数组.在
XComponent
模板中我们可以使用ZComponent
因为Transitive module X
有包含ZComponent
因为XModule
导入模块 (YModule
) 导出模块 (ZModule
) 导出指令ZComponent
在
AppComponent
模板中我们不能使用XComponent
因为AppModule
导入XModule
但XModule
不导出XComponent
.
另见
I have Angular 2.0.0 app generated with angular-cli.
When I create a component and add it to AppModule
's declarations array it's all good, it works.
I decided to separate the components, so I created a TaskModule
and a component TaskCard
. Now I want to use the TaskCard
in one of the components of the AppModule
(the Board
component).
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{}
The whole project is available on https://github.com/evgdim/angular2 (kanban-board folder)
What am I missing? What do I have to do to use TaskCardComponent
in BoardComponent
?
The main rule here is that:
The selectors which are applicable during compilation of a component template are determined by the module that declares that component, and the transitive closure of the exports of that module's imports.
So, try to export it:
@NgModule({
declarations: [TaskCardComponent],
imports: [MdCardModule],
exports: [TaskCardComponent] // <== export the component you want to use in another module
})
export class TaskModule{}
What should I export?
Export declarable classes that components in other modules should be able to reference in their templates. These are your public classes. If you don't export a class, it stays private, visible only to other component declared in this module.
The minute you create a new module, lazy or not, any new module and you declare anything into it, that new module has a clean state(as Ward Bell said in https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2)
Angular creates transitive module for each of @NgModule
s.
This module collects directives that either imported from another module(if transitive module of imported module has exported directives) or declared in current module.
When angular compiles template that belongs to module X
it is used those directives that had been collected in 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
This way according to the picture above
YComponent
can't useZComponent
in its template becausedirectives
array ofTransitive module Y
doesn't containZComponent
becauseYModule
has not importedZModule
whose transitive module containsZComponent
inexportedDirectives
array.Within
XComponent
template we can useZComponent
becauseTransitive module X
has directives array that containsZComponent
becauseXModule
imports module (YModule
) that exports module (ZModule
) that exports directiveZComponent
Within
AppComponent
template we can't useXComponent
becauseAppModule
importsXModule
butXModule
doesn't exportsXComponent
.
See also
why lazy loaded module has to import commonModule? Angular 2
What is the difference between declarations, providers, and import in NgModule?
这篇关于使用另一个模块的组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!