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

Question

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

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

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

アプリモジュール:

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 (kanban-board フォルダー)で入手できます。

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

score 496 · Accepted Answer

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

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

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

@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

上の写真の通りこのように

YComponentcan't ZComponentin its template because directivesthe array of Transitive module Ydoes not contain ZComponentbecause YModulehas not import ZModulewhich transitive module contains ZComponentin exportedDirectivesarray.
XComponentテンプレート内で使用できるのは、ディレクティブをエクスポートするモジュール ( ) をインポートするモジュール ( )を含むディレクティブ配列があるため ZComponentです。Transitive module XZComponentXModuleYModuleZModuleZComponent
AppComponentテンプレート内ではimportsは使用XComponentできますが、 exports は使用できません。AppModuleXModuleXModuleXComponent

こちらもご覧ください

score 85 · Accepted Answer

(Angular 2 - Angular 7)

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

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

第 1 モジュール:

コンポーネントがあり (「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 { }

score 44 · Accepted Answer

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

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

score -4 · Accepted Answer

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

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 番目のモジュールで最初のコンポーネントを使用できます。

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

7 に答える 7

Related

Reference