使用另一个模块的组件 [英] Use component from another module

问题描述

我使用 angular-cli 生成了 Angular 2.0.0 应用程序.

当我创建一个组件并将其添加到 AppModule 的声明数组时，一切都很好，它可以工作.

我决定将组件分开，所以我创建了一个 TaskModule 和一个组件 TaskCard.现在我想在 AppModule 的组件之一(Board 组件)中使用 TaskCard.

应用模块:

import { BrowserModule } from '@angular/platform-b​​rowser';从'@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.

另见

• 为什么延迟加载模块必须导入 commonModule 吗?角度 2

• Angular 模块常见问题

• 什么是NgModule 中声明、提供者和导入之间的区别?

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 @NgModules.

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 use ZComponent in its template because directives array of Transitive module Y doesn't contain ZComponent because YModule has not imported ZModule whose transitive module contains ZComponent in exportedDirectives array.

• Within XComponent template we can use ZComponent because Transitive module X has directives array that contains ZComponent because XModule imports module (YModule) that exports module (ZModule) that exports directive ZComponent

• Within AppComponent template we can't use XComponent because AppModule imports XModule but XModule doesn't exports XComponent.

See also

• why lazy loaded module has to import commonModule? Angular 2

• Angular Module FAQs

• What is the difference between declarations, providers, and import in NgModule?

这篇关于使用另一个模块的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！