角度2別のモジュールのコンポーネントを使用する

Question

角度-cliで生成された角度2（バージョン2.0.0 - 最終）のアプリケーションがあります。

コンポーネントを作成し、それをAppModuleの宣言配列に追加すると、すべてうまくいきます。

コンポーネントを分けることにしたので、TaskModuleとコンポーネントTaskCardを作成しました。今度は、AppModule（Boardコンポーネント）のコンポーネントの1つに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を使用するには何が必要ですか？

Answer 1

はそれをエクスポートしよう：

@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のそれぞれに対して推移的モジュールを作成します。 （インポートされたモジュールの推移モジュールはディレクティブをエクスポートした場合）、または現在のモジュールで宣言さ

このモジュールいずれか他のモジュールからインポート指示を収集します。

モジュール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

Transitive module YのdirectivesアレイZComponentが含まれていないので、この方法は

• YComponent上記画像に応じて、そのテンプレートにZComponentを使用することはできませんYModuleはZModuleをインポートしていません。そのトランジエントモジュールのZComponentはexportedDirectivesアレイに含まれています。 Transitive module Xモジュール（ZModule）をエクスポートしZComponent ためXModule輸入モジュール（YModule）が含まれてディレクティブの配列を持っているので、XComponentテンプレート内

• 我々は輸出ディレクティブことZComponentを使用することができますZComponent

• AppComponentテンプレート内の私たちがすることはできませんAppModuleXModuleがインポートされますが、XModuleはXComponentをエクスポートしないため、XComponentを使用してください。

も

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

• Angular Module FAQs

• What is difference between declarations, providers and import in NgModule
を参照してください。

Answer 2

はあなたのNgModuleからexportそれに持っている：あなたは、別のモジュールから使用したいものは何でも

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

Answer 3

がちょうど輸出配列にそれを置きます。いわゆる「機能モジュール」を作成するために、あなたはその中CommonModuleをインポートする必要があることthis-

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

Answer 4

ノートのように 。だから、あなたのモジュールの初期化コードは次のようになります。ここでは利用でき

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