web-dev-qa-db-fra.com

comment utiliser le composant de module parent dans le composant de module enfant dans angular2

J'ai un en-tête qui doit être utilisé à la fois dans le module enfant et parent.qui a été importé et utilisé dans le module parent, mais lorsque j'essaie d'importer et d'utiliser dans le composant enfant, il affiche une erreur.Je veux dire comment utiliser un en-tête commun pour le module parent et enfant

Non capturé (en promesse): Erreur:

Type HeaderComponent fait partie des déclarations de 2 modules: AppModule et ProviderModule! Veuillez envisager de déplacer HeaderComponent vers un module supérieur qui importe AppModule et ProviderModule.

Vous pouvez également créer un nouveau NgModule qui exporte et inclut HeaderComponent, puis importer ce NgModule dans AppModule et ProviderModule.

angularcomponentsangular2-template
14
j dileep

Vous devez créer un module partagé avec les composants que vous souhaitez utiliser, exporter ces composants et importer le module partagé dans vos autres modules (parent et enfant pour votre cas).

Module partagé:

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 {}

Utilisation du module partagé:

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