Quelle est la différence entre declarations et entryComponents

Question

J'ai dans mon application.le module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { EliteApi } from '../shared/shared';
import { MyApp } from './app.component';
import { MyTeams, Tournaments, TeamDetails, Teams, TeamHome, Standings } from '../pages/pages';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
    declarations: [
        MyApp,
        MyTeams,
        TeamDetails,
        Tournaments,
        Teams,
        TeamHome,
        Standings
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        MyTeams,
        TeamDetails,
        Tournaments,
        Teams,
        TeamHome,
        Standings
    ],
    providers: [
        HttpModule,
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler },        
        EliteApi
    ]
})
export class AppModule { }

En ce moment, ma declarations et entryComponents les deux sont exactement les mêmes. Ils contiennent tous de la page/composants que j'ai créé pour mon application. Si j'ai supprimer toutes les entrées de toutes les propriétés, j'obtiens le message d'erreur dans angular2.

Ma question est de savoir si ils sont toujours les mêmes, alors quel est le besoin pour ces propriétés? Je pense que je ne suis pas certains point ici. Quand entryComponents et declaractions être différents l'un de l'autre?

Answer 1

Le tableau entryComponents est utilisé pour définir uniquement les composants non trouvés en HTML et créés dynamiquement avec ComponentFactoryResolver . Angular a besoin de cet indice pour les trouver et les compiler. Tous les autres composants doivent juste être listés dans le tableau de déclarations.

Voici la documentation sur le site angulaire

Answer 2

En ajoutant à ce que @Julia a répondu à cette question. Je voudrais ajouter des cas d'utilisation de Modal.

---

Permet de dire, vous disposez d'un composant appelé comme ModalComponent. Pour le rendre plus réutilisable, que vous souhaitez passer un composant de nom et s'attendre à ce que le composant à être rendus à l'intérieur de l' ModalComponent*.

L'échantillon module.ts serait quelque chose comme:

import:[ModalModule],  // As a best practice, we can create Modal as a separate Feature
entryComponent : [TheCompYouWantToRenderInsideModalComponent]

Nous passerait TheCompYouWantToRenderInsideModalComponent comme entryComponent parce que ce composant ne sera pas présent lors de l'écriture de code du site (j'.e il n'y aurait pas de sélecteur d' TheCompYouWantToRenderInsideModalComponent dans tout HTML le fichier). Nous allons passer cette component Modal et puis il va être rendu de manière dynamique au fur et à quand le modal est ouvert. Quelque chose comme ci-dessous:

onSomeButtonClickToOpenModal(){
     this.modalService.openModal(TheCompYouWantToRenderInsideModalComponent);
}

---

_{*Dans l' ModalModule, il faudrait créer le service d' ComponentFactoryResolver et de prendre en TheCompYouWantToRenderInsideModalComponent comme argument. Plus tard, nous pouvons appeler une fonction (appelons - openModal(componentType: ComponentType)), qui permettra d'Ouvrir et de rendre l'aide d' ComponentFactoryResolver}

---

Remarque: L' entryComponent va également jouer un rôle important dans Angulaire V6 elements pour le même but.

Answer 3

En bref:

La "vraie" raison de l'existence d' entryComponents est l'arbre qui tremble, tout en declarations existe principalement pour le module d'encapsulation. Donc, ils ne sont même pas comparables. Si l'arbre qui tremble n'était pas notre préoccupation, nous serions bien avec les déclarations d'une source unique pour les deux.

Plus de réponse

Tous les components que vous avez créé dans votre module ne vont pas au final bundle. Plutôt, seuls les composants qui ont été déclarés en template l'aide selectors OU components qui ont été ajoutés entryComponents tableau (par vous ou le cadre).

Vous souhaitez ajouter le composant lorsque vous créer le composant dynamiquement comme l'utilisation d' ComponentFactoryResolver comme l'a déclaré accepté de répondre. Ou cadre peut ajouter le composant lorsque vous les déclarez dans le tableau de Route ou lors d'une autre impératif création de.

De officiel docs:

En fait, de nombreuses bibliothèques de déclarer et d'exporter des composants que vous ne serez jamais utiliser. Par exemple, une conception matérielle de la bibliothèque permettra d'exporter tous les composants parce qu'il ne sait pas quels sont ceux que vous allez utiliser. Cependant, il est peu probable que vous allez les utiliser tous. Pour ceux qui ne le sont pas de référence, l'arbre agitateur gouttes de ces composants de la version finale du code de package.

Si un composant n'est pas une entrée composante et n'est pas trouvé dans un modèle, l'arbre agitateur va le jeter. Donc, il est préférable de n'ajouter que les les composants qui sont vraiment de l'entrée de composants pour aider à garder votre application garniture que possible.