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

私はangular-cliで生成されたAngular 2.0.0アプリを持っています。

コンポーネントを作成し、それをAppModuleの宣言配列に追加すると、問題なく動作します。

コンポーネントを分離することにしたので、TaskModuleおよびコンポーネントを作成しましたTaskCard。次にTaskCard、AppModule（Boardコンポーネント）のコンポーネントの1つでを使用します。

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（かんばんボードフォルダー）で利用できます。

何が欠けていますか？で使用するにTaskCardComponentはBoardComponentどうすればよいですか？

ここでの主なルールは次のとおりです。

コンポーネントテンプレートのコンパイル中に適用できるセレクターは、そのコンポーネントを宣言するモジュールと、そのモジュールのインポートのエクスポートの推移的な終了によって決定されます。

だから、それをエクスポートしてみてください：

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

何をエクスポートすればよいですか？

他のモジュールのコンポーネントがテンプレートで参照できる宣言可能なクラスをエクスポートします。これらは公開クラスです。クラスをエクスポートしない場合、クラスはプライベートのままで、このモジュールで宣言された他のコンポーネントからのみ参照できます。

レイジーかどうかに関係なく、新しいモジュールを作成してその中に何かを宣言すると、その新しいモジュールはクリーンな状態になります（Ward Bellが https://devchat.tv/adv-in-angular/119で言ったように） -aia-avoiding-common-pitfalls-in-angular2）

Angularはそれぞれの推移モジュールを作成します@NgModule s。

このモジュールは、別のモジュールからインポートされた（インポートされたモジュールの推移的なモジュールがディレクティブをエクスポートした場合）、または現在のモジュールで宣言されたディレクティブを収集します。

angularは、モジュール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ディレクティブをエクスポートするモジュール（）をエクスポートするインポートモジュール（）を含むZComponentため、 ディレクティブ配列を含むXModuleYModuleZModuleZComponent

• AppComponentテンプレート内ではXComponent、AppModuleインポートはするがエクスポートはしないためXModule、使用できXModuleませんXComponent。

こちらもご覧ください

• 遅延ロードされたモジュールがcommonModuleをインポートする必要があるのはなぜですか？角度2

• Angularモジュールに関するFAQ

• NgModuleでの宣言、プロバイダー、インポートの違いは何ですか

あなたはあなたからexportそれをしなければなりませんNgModule：

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

（角度2-角度7）

コンポーネントは単一のモジュールでのみ宣言できます。別のモジュールのコンポーネントを使用するには、2つの簡単なタスクを実行する必要があります。

1. 他のモジュールでコンポーネントをエクスポートする
2. 他のモジュールを現在のモジュールにインポートします

最初のモジュール：

コンポーネント（「ImportantCopmonent」と呼ぶことにします）があれば、2番目のモジュールのページで再利用します。

@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 { }

2番目のモジュール：

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 { }

いわゆる「機能モジュール」を作成するには、その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

別のモジュールから使用したいものは何でも、それをエクスポート配列に入れてください。このような-

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

1つの大きくて優れたアプローチは、からモジュールをロードするNgModuleFactoryことです。これを呼び出すことで、別のモジュール内にモジュールをロードできます。

constructor(private loader: NgModuleFactoryLoader, private injector: Injector) {}

loadModule(path: string) {
    this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
        const entryComponent = (<any>moduleFactory.moduleType).entry;
        const moduleRef = moduleFactory.create(this.injector);
        const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
        this.lazyOutlet.createComponent(compFactory);
    });
}

私はからこれを得たここに。

他のモジュールのモジュールで宣言されているコンポーネントを使用する方法を解決しました。

Royi Namirの説明に基づいています（ありがとうございました）。遅延読み込みの使用中に、モジュールで宣言されたコンポーネントを他のモジュールで再利用するための欠落部分があります。

1つ目：コンポーネントを含むモジュールにコンポーネントをエクスポートします。

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

2番目：TaskCardComponentを使用するモジュール：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MdCardModule } from '@angular2-material/card';

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

このように、2番目のモジュールは、コンポーネントをインポートおよびエクスポートする最初のモジュールをインポートします。

モジュールを2番目のモジュールにインポートするときは、もう一度エクスポートする必要があります。これで、2番目のモジュールの最初のコンポーネントを使用できます。