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

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

angular-cli で生成された Angular 2.0.0 アプリがあります。

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

コンポーネントを分離することにしたので、 とTaskModuleコンポーネントを作成しました。ここで、 (コンポーネント)のコンポーネントの 1 つで をTaskCard使用したいと思います。TaskCardAppModuleBoard

アプリモジュール:

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(カンバンボードフォルダ)

何が足りないのでしょうか? を使用するには何をする必要がありますTaskCardComponentBoardComponent?

ベストアンサー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そのテンプレートで を使用できません。directivesTransitive module YZComponentYModuleZModuleZComponentexportedDirectives

  • テンプレート内では、 becauseには、 becauseがモジュール()をインポートし、モジュール()をエクスポートし、ディレクティブをエクスポートする配列があるためXComponent、使用できます。ZComponentTransitive module XZComponentXModuleYModuleZModuleZComponent

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

参照

おすすめ記事