angular - 使用来自另一个模块的组件

Question

我有使用 angular-cli 生成的 Angular 2.0.0 应用程序。

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

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

应用模块:

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 上获得(看板文件夹)

我错过了什么？我需要做什么才能在 BoardComponent 中使用 TaskCardComponent？

Answer 1

这里的主要规则是:

组件模板编译期间适用的选择器由声明该组件的模块以及该模块导入的导出的传递闭包决定。

所以，尝试导出它:

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] // <== export the component you want to use in another module
})
export class TaskModule{}

我应该导出什么？

Export declarable classes that components in other modules should beable to reference in their templates. These are your public classes.If you don't export a class, it stays private, visible only to othercomponent declared in this module.

在您创建一个新模块的那一刻，无论是否是惰性的，任何新模块并在其中声明任何内容，该新模块都处于干净状态(如 Ward Bell在 https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2 中说)

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

此模块收集从另一个模块导入的指令(如果导入模块的传递模块具有导出指令)或在当前模块中声明。

当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在它的模板中因为 directives Transitive module Y 的数组不包含 ZComponent因为YModule未导入ZModule其传递模块包含ZComponent在 exportedDirectives数组。

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

• 在 AppComponent 内我们不能使用的模板 XComponent因为AppModule进口XModule但是XModule不导出 XComponent .

另见

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

• Angular Module FAQs

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