Angular 2使用另一個模塊中的組件

我使用angular-cli生成的Angular 2（2.0.0版 - 最終版）應用程序。Angular 2使用另一個模塊中的組件

當我創建一個組件並將它添加到AppModule的聲明數組中時，它很好用。

我決定分開組件，所以我創建了一個TaskModule和一個組件TaskCard。現在我想在AppModule（Board組件）的其中一個組件中使用TaskCard。

的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（看板板夾）

什麼我失蹤？我需要做什麼才能在BoardComponent中使用TaskCardComponent？

來源

2016-09-20 Evgeni Dimitrov

178

嘗試導出：

@NgModule({ 
    declarations: [TaskCardComponent], 
    imports: [MdCardModule], 
    exports: [TaskCardComponent] <== this line 
}) 
export class TaskModule{}

我應該怎麼出口？

出口申報類，在其他模塊組件應該能夠在他們的模板來引用。這些是你的公開課。如果您不導出類，它將保持私有狀態，只有在此模塊中聲明的其他組件纔可見。

您創建一個新的模塊，懶惰或者沒有，任何新的模塊，並聲明任何東西進去，新的模塊有一個乾淨的狀態（如病房貝爾在https://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2說）那一刻

角度創建傳遞模塊爲每個@NgModule s。

該模塊收集從其他模塊導入的指令（如果導入模塊的傳遞模塊已導出指令）或在當前模塊中聲明的指令。

當角度編譯屬於模塊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有出口模塊（ZModule）指令數組，其中包含ZComponent因爲 XModule進口模塊（YModule），出口指令ZComponent
在AppComponent模板，我們不能使用XComponent，因爲AppModule進口XModule但XModule不出口XComponent。

又見

來源

2016-09-20 18:58:12 yurzui

如何在引入模塊中使用「TaskCardComponent」在路由定義？ – jackOfAll

多好的答案。你是否創建了繪圖？如果是這樣，我無言以對。不是每個人都將這種努力放在他們的答案中謝謝 –

@羅伊是的，這是我的照片:)它基於源代碼https://github.com/angular/angular/blob/master/packages/compiler/src/metadata_resolver.ts#L424 – yurzui

你必須export它從你的NgModule：無論你想從另一個模塊使用，

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

來源

2016-09-20 18:58:41 mxii

這工作，直到TaskModule導入AppModule。 TaskModule延遲加載時失敗。 – Arun

@Arun你如何解決它？ – Jdruwe

如何知道TaskModule是否爲Lazyloaded？以及如何解決它？ –

-1

只是把它的出口陣列英寸像這個 -

@NgModule({ 
    declarations: [TaskCardComponent], 
    exports: [TaskCardComponent], 
    imports: [MdCardModule] 
})

來源

2017-08-25 17:42:09

注意的是，爲了創建一個所謂的「功能模塊」，你需要導入CommonModule裏面。所以，你的模塊初始化代碼如下所示：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { TaskCardComponent } from './task-card/task-card.component'; 
import { MdCardModule } from '@angular2-material/card'; 

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

的更多信息請訪問：https://angular.io/guide/ngmodule#create-the-feature-module

來源

2017-12-08 14:11:53 nostop

Angular 2使用另一個模塊中的組件

回答

相關問題