angular-cli で生成された Angular 2.0.0 アプリがあります。
コンポーネントを作成してそれAppModule
を の宣言配列に追加すると、すべて正常に動作します。
コンポーネントを分離することにしたので、 とTaskModule
コンポーネントを作成しました。ここで、 (コンポーネント)のコンポーネントの 1 つで をTaskCard
使用したいと思います。TaskCard
AppModule
Board
アプリモジュール:
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 { }
タスクモジュール:
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
?
ベストアンサー1
ここでの主なルールは次のとおりです。
コンポーネント テンプレートのコンパイル中に適用可能なセレクターは、そのコンポーネントを宣言するモジュールと、そのモジュールのインポートのエクスポートの推移的閉包によって決定されます。
それでは、エクスポートしてみます:
@NgModule({
declarations: [TaskCardComponent],
imports: [MdCardModule],
exports: [TaskCardComponent] // <== export the component you want to use in another module
})
export class TaskModule{}
何をエクスポートすればよいですか?
他のモジュールのコンポーネントがテンプレートで参照できる宣言可能なクラスをエクスポートします。これらはパブリック クラスです。クラスをエクスポートしない場合は、そのクラスはプライベートのままとなり、このモジュールで宣言されている他のコンポーネントにのみ表示されます。
新しいモジュールを作成した瞬間、それが遅延型であろうとなかろうと、どんな新しいモジュールでも、そこに何かを宣言すると、その新しいモジュールはクリーンな状態になります(Ward Bellがhttps://devchat.tv/adv-in-angular/119-aia-avoiding-common-pitfalls-in-angular2)
Angular は、それぞれに対して推移的なモジュール@NgModule
を作成します。
このモジュールは、別のモジュールからインポートされたディレクティブ(インポートされたモジュールの推移的なモジュールにエクスポートされたディレクティブがある場合)または現在のモジュールで宣言されたディレクティブを収集します。
Angular がモジュールに属するテンプレートをコンパイルするときに、X.transitiveModule.directivesX
で収集されたディレクティブが使用されます。
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
テンプレート内では、 becauseには、 becauseがモジュール()をインポートし、モジュール()をエクスポートし、ディレクティブをエクスポートする配列があるため
XComponent
、使用できます。ZComponent
Transitive module X
ZComponent
XModule
YModule
ZModule
ZComponent
テンプレート内では、インポートはしますがエクスポートしないため
AppComponent
、使用できません。XComponent
AppModule
XModule
XModule
XComponent
参照