Angular 2使用另一个模块中的组件

Question

Angular 2使用另一个模块中的组件我有使用angular-cli生成的Angular 2（版本2.0.0 - 最终版）app。当我创建一个组件并将其添加到AppModule声明数组时，它一切都很好，它可以工作。我决定将组件分开，所以我创建了TaskModule一个组件TaskCard。现在我想用TaskCard在的组成部分之一AppModule（的Board成分）。的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（kanban-board文件夹）上找到我错过了什么？我必须做的，用TaskCardComponent的BoardComponent？

Answer 1

你必须export从你的NgModule：

@NgModule({
  declarations: [TaskCardComponent],
  exports: [TaskCardComponent],
  imports: [MdCardModule],
  providers: []})export class TaskModule{}

Answer 2

组件只能在单个模块中声明。要使用其他模块中的组件，您需要执行两个简单的任务：

1. 在第一个模块中导出组件

2. 将第一个模块导入第二个模块

第一单元：

有一个组件（让我们称之为“ImportantCopmonent”），我们想在第二个模块的页面中重用。

@NgModule({declarations: [
    FirstPage,
    ImportantCopmonent // <-- Enable using the component html tag in current module],imports: [
  IonicPageModule.forChild(NotImportantPage),
  TranslateModule.forChild(),],exports: [
    FirstPage,
    ImportantCopmonent // <--- Enable using the component in other modules
  ]})export class FirstPageModule { }

---

第二单元：

通过导入FirstPageModule重用“ImportantCopmonent”

@NgModule({declarations: [
    SecondPage,
    Example2ndComponent,
    Example3rdComponent],imports: [
  IonicPageModule.forChild(SecondPage),
  TranslateModule.forChild(),
  FirstPageModule // <--- this Imports the source module, with its exports], exports: [
    SecondPage,]})export class SecondPageModule { }