Angular 2使用另一個模塊中的組件我有使用angular-cli生成的Angular 2（版本2.0.0 - 最終版）app。當我創(chuàng)建一個組件并將其添加到AppModule聲明數組時，它一切都很好，它可以工作。我決定將組件分開，所以我創(chuàng)建了TaskModule一個組件TaskCard?，F在我想用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？
3 回答
慕田峪4524236
TA貢獻1875條經驗 獲得超5個贊
你必須export從你的NgModule：
@NgModule({
declarations: [TaskCardComponent],
exports: [TaskCardComponent],
imports: [MdCardModule],
providers: []})export class TaskModule{}
元芳怎么了
TA貢獻1798條經驗 獲得超7個贊
組件只能在單個模塊中聲明。要使用其他模塊中的組件，您需要執(zhí)行兩個簡單的任務：
在第一個模塊中導出組件
將第一個模塊導入第二個模塊
第一單元：
有一個組件（讓我們稱之為“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 { }- 3 回答
- 0 關注
- 2426 瀏覽
添加回答
舉報
0/150
提交
取消