Angular2モジュール内のコンポーネントのインポート

Question

異なるモジュール間で再利用したいローディング画面コンポーネントがあります。

私はReportsComponent HTMLで

 @NgModule ({ 
    declarations: [ 
    ReportsComponent 
    ], 
    }); 
export class ReportsModule { 
} 

を持ってReportsModuleでAppModule

@NgModule ({ 
    declarations: [ 
    LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
    ReportsModule,DashboardModule 
    ] 

    }); 
export class AppModule { 
} 

を持って、このようにそれをやったとき

<app-loading-screen></app-loading-screen> 

ファイルエラーにその

を取得しています

'app-loading-screen' is not a known element 

異なるモジュールのいくつかの他のコンポーネントも、ローディング画面コンポーネントを使用する必要があります。

これはまだ失敗しましたが、私はLoadingScreenComponentをルートモジュールに含めました。または私はそれについてどうやって行くのですか？

Answer 1

あなたが共有モジュールとあなたとしてLoding画面部品を行うことができます輸入共有モジュールの両方のアプリモジュールおよびレポートモジュール

import { NgModule} from '@angular/core'; 
@NgModule({ 
imports: [ 
], 
declarations: [ 
LoadingScreenComponent 
], 
providers: [ 

], 
exports: [ 
    LoadingScreenComponent 
] 
}) 
export class SharedModule { } 

は、その後、あなたが両方ダッシュボードモジュールおよびレポートモジュール

Answer 2

NgModuleにbootstrap: [ LoadingScreenComponent ]を追加します。

編集が定義されているもの、あなたのインデックスにも

@NgModule ({ 
    declarations: [ 
    LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
    ReportsComponent,DashboardModule 
    ], 
    bootstrap: [ LoadingScreenComponent ] 

    }); 
export class AppModule { 
} 

？

通常、レポートhtmlをメインコンポーネントに追加するのは、それ以外の方法ではありません。

Answer 3

LoadingScreenComponentはAppModuleで宣言されていますが、AppModuleにインポートされたReportsModuleはLoadingScreenComponentについて認識していません。両方に共通のモジュールを作成し、そこにLoadingScreenComponentをインポートするには、リファクタリングする必要があります。

Answer 4

以下のように、LoadingScreenComponentにセレクタを含めてください。 セレクタはAppModuleにLoadingScreenComponent輸出にアレイを追加成分

import { 
    Component 
} from '@angular/core'; 

@Component({ 
    selector: 'app-loading-screen', 
    templateUrl: 'loading-screen.component.html' 
}) 

export class LoadingScreenComponent {} 

Answer 5

にアプリに使用されます。これは、それが世界的にアクセスできるようになります。

import { NgModule } from '@angular/core'; 
import { LoadingScreenComponent } from '...'; //Path to the LoadingScreenComponent 

@NgModule({ 
    declarations: [ 
     LoadingScreenComponent 
    ],  
    exports: [ 
     LoadingScreenComponent 
    ] 
}) 
export class SharedModule { } 

およびインポート：

@NgModule({ 
    declarations: [ 
     LoadingScreenComponent //has tag app-loading-screen 
    ], 
    imports: [ 
     ReportsModule, 
     DashboardModule 
    ], 
    exports: [ 
     LoadingScreenComponent 
    ] 
}) 
export class AppModule { 
} 

をそれ以外の場合は、最良の方法は、共有モジュールを作成し、LoadingScreenComponentを使用する他のモジュールにそのモジュールをインポートすることですそれこのような他のモジュールへ：

import { SharedModule } from '...'; //Path to the SharedModule 

@NgModule({ 
    declarations: [ 
     ReportsComponent 
    ], 
    imports[ 
     SharedModule 
    ] 
}) 
export class ReportsModule { } 

Answer 6

に共有モジュールをインポートすることができますが、他のモジュール内の共有このようなモジュールとインポートを作成します。 ReportModule

@NgModule ({ 
    declarations: [ 
    SharedMoudule, 
    ReportsComponent 
    ], 
    }); 
export class ReportsModule {}