web-dev-qa-db-fra.com

Comment partager des composants entre les modules dans Angular 2?

Je ne sais pas comment partager des composants entre les modules dans Angular 2. Le point est: j'ai deux modules dans l'application, le 'Module clients' et le 'Module fournisseurs'.

Ces deux modules, dans leurs composants, utilisent le AddressComponent et le EmailComponent. Ils utilisent également les interfaces Adresse et E-mail.

Maintenant, j'ai actuellement beaucoup de duplication, car j'ai copié et collé ces composants et interfaces sur les deux modules. C'est évidemment tout simplement faux.

J'ai besoin d'un moyen d'importer ces composants à utiliser sur les deux modules. Mais je n'ai aucune idée de comment le faire.

Dois-je créer un autre module pour ce contenu partagé et l'importer dans les deux? Quelle est la bonne façon de partager des composants entre les modules dans Angular 2?

angularcomponentsweb-component
12
user1620696

Créez un NgModule partagé qui aura tous les Component/Service/Pipe communs. Vous éviterez ainsi la duplication de code. Il rendra le code modulaire, enfichable et testable.

Pour utiliser AddressComponent & EmailComponent dans d'autres modules, vous devez les export à partir du module partagé:

Code

@NgModule({
   imports: [CommonModule],
   declarations: [AddressComponent, EmailComponent],
   providers: [MySharedService],
   exports: [AddressComponent, EmailComponent],
})
export class SharedModule() { }

En consommant SharedModule, il vous suffit d'importer SharedModule

@NgModule({
   imports: [CommonModule, SharedModule, ... ],
   providers: [..]
})
export class CustomersModule() { }
16
Pankaj Parkar

Comment partager un composant avec plusieurs modules dans Angular2

Salut les gars,

In every application some times there were some views which are repeated in the whole application, and for that we have two option:

Soit nous répétons le même code partout dans toutes les vues où il sera utilisé. Ou nous pouvons créer un composant commun et le partager avec toutes les autres vues

Si la fonctionnalité de la vue répétée est la même partout, alors la répétition du code n'est pas une meilleure pratique, à mon avis, créer un composant commun et l'appliquer à toutes les différentes vues/modules est une excellente idée, cela réduit la redondance du code et rend notre application soigné et propre, même si quelque chose est changé, vous ne devez le changer que dans un seul composant.

Mais comment pouvons-nous y parvenir dans l'application Angular 2?

Puisque dans Angular 2, nous suivons un modèle de conception modulaire, ce qui signifie que nous conservons différentes vues dans différents modules, mais la question est de savoir comment partager un seul composant avec différents modules?

Nous ne pouvons pas partager un composant dans différents modules en important simplement ce composant à l'intérieur de tous les modules, car Angular 2 ne nous permet pas d'importer un seul composant dans différents modules, si vous essayez de le faire alors Angular générera une erreur: Type X(component) fait partie des déclarations de 2 modules

Type X(component) fait partie des déclarations de 2 modules

Donc, pour résoudre ce problème, nous créons un module partagé au lieu de partager un composant, maintenant nous partageons ce module dans tous les autres modules pour cela, nous utilisons l'instruction d'importation et importons le module partagé dans tous les autres modules après cela, le composant sera automatiquement partagé avec tous les modules.

Voici l'exemple de la façon de le faire:

SharedModule

@NgModule ({importations: [SomeModule], déclarations: [SharedComponent], exportations: [SharedComponent]})

classe d'exportation SharedMoule {} app.module.ts

importer {SharedModule} à partir de './shared/shared.module;

@NgModule ({importations: [SharedModule], ...})

1
gnganpath