[解決済み】他のモジュールからコンポーネントを使用する

質問

Angular 2.0.0のアプリをangular-cliで生成しています。

コンポーネントを作成し、それを 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 ?

解決方法は？

ここでの大原則は、以下の通りです。

コンポーネントテンプレートのコンパイル時に適用されるセレクタは、そのコンポーネントを宣言しているモジュールと、そのモジュールのimportのexportの推移的クロージャによって決定されます。

では、エクスポートしてみてください。

@NgModule({
  declarations: [TaskCardComponent],
  imports: [MdCardModule],
  exports: [TaskCardComponent] // <== export the component you want to use in another module
})
export class TaskModule{}

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

他のモジュールのコンポーネントが宣言可能なクラスをエクスポートします。 をテンプレートで参照することができます。これらは、あなたのパブリック・クラスです。 もしクラスをエクスポートしないなら、それはプライベートなままです。 コンポーネントは、このモジュールで宣言されています。

新しいモジュールを作成し、そのモジュールに何かを宣言すると、その新しいモジュールはクリーンな状態になります。 (でウォード・ベルが言っているように）。 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 なぜなら XModule はモジュールをインポートしています ( YModule ) をエクスポートし、そのモジュール ( ZModule をエクスポートするディレクティブ ZComponent

• 内 AppComponent テンプレートでは XComponent なぜなら AppModule 輸入品 XModule しかし XModule はエクスポートされません。 XComponent .

こちらもご覧ください

• なぜ遅延ロードされたモジュールは commonModule を import しなければならないのですか? アンギュラー2

• AngularモジュールFAQ

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