web-dev-qa-db-ja.com

angular2の子モジュールコンポーネントで親モジュールコンポーネントを使用する方法

インポートされて親モジュールで使用された子モジュールと親モジュールの両方で使用する必要があるヘッダーがありますが、インポートして子コンポーネントで使用しようとするとエラーが表示されます。親モジュールと子モジュールの両方に共通のヘッダーを使用する方法を意味します

キャッチされません（約束）：エラー：

タイプHeaderComponentは、2つのモジュールの宣言の一部です：AppModuleとProviderModule！ HeaderComponentを、AppModuleとProviderModuleをインポートする上位モジュールに移動することを検討してください。

また、HeaderComponentをエクスポートしてインクルードする新しいNgModuleを作成し、そのNgModuleをAppModuleおよびProviderModuleにインポートすることもできます。

angularcomponentsangular2-template
14
j dileep

使用するコンポーネントで共有モジュールを作成し、これらのコンポーネントをエクスポートして、他のモジュール（ケースの場合は親と子）に共有モジュールをインポートする必要があります。

共有モジュール：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedComponent1 } from "./SharedComponent1";
import { SharedComponent2 } from "./SharedComponent2";

@NgModule({
imports: [
    CommonModule
],
declarations: [
    SharedComponent1,
    SharedComponent2
],
exports: [
    SharedComponent1,
    SharedComponent2
]
})
export class SharedModule {}

共有モジュールの使用：

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
...
import { SharedModule } from './SharedModule';

@NgModule({
imports: [
    CommonModule,
    ...
    SharedModule
],
declarations: [
    ...
],
providers: [
    ...
]
})
export class AppModule{}
22
ST7