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

组件只能在单个模块中声明。要使用其他模块中的组件，您需要执行两个简单的任务：在第一个模块中导出组件将第一个模块导入第二个模块第一单元：有一个组件（让我们称之为“ImportantCopmonent”），我们想在第二个模块的页面中重用。@NgModule({declarations:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;FirstPage, &nbsp;&nbsp;&nbsp;&nbsp;ImportantCopmonent&nbsp;//&nbsp;<--&nbsp;Enable&nbsp;using&nbsp;the&nbsp;component&nbsp;html&nbsp;tag&nbsp;in&nbsp;current&nbsp;module],imports:&nbsp;[ &nbsp;&nbsp;IonicPageModule.forChild(NotImportantPage), &nbsp;&nbsp;TranslateModule.forChild(),],exports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;FirstPage, &nbsp;&nbsp;&nbsp;&nbsp;ImportantCopmonent&nbsp;//&nbsp;<---&nbsp;Enable&nbsp;using&nbsp;the&nbsp;component&nbsp;in&nbsp;other&nbsp;modules &nbsp;&nbsp;]})export&nbsp;class&nbsp;FirstPageModule&nbsp;{&nbsp;}第二单元：通过导入FirstPageModule重用“ImportantCopmonent”@NgModule({declarations:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;SecondPage, &nbsp;&nbsp;&nbsp;&nbsp;Example2ndComponent, &nbsp;&nbsp;&nbsp;&nbsp;Example3rdComponent],imports:&nbsp;[ &nbsp;&nbsp;IonicPageModule.forChild(SecondPage), &nbsp;&nbsp;TranslateModule.forChild(), &nbsp;&nbsp;FirstPageModule&nbsp;//&nbsp;<---&nbsp;this&nbsp;Imports&nbsp;the&nbsp;source&nbsp;module,&nbsp;with&nbsp;its&nbsp;exports],&nbsp;exports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;SecondPage,]})export&nbsp;class&nbsp;SecondPageModule&nbsp;{&nbsp;}