Qu'est-ce que entryComponents dans ngModule angulaire?

Question

Je travaille sur un Ionic app ( 2.0.0-rc0 ) qui dépend de angular 2 . Ainsi, la nouvelle introduction de ngModules est incluse. J'ajoute mes app.module.ts. ci-dessous.

 import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}
 

Que font entryComponents ici? Components sont déjà définis en declarations . Alors, quel est le besoin de les répéter? Que se passerait-il si je n'incluais pas de composant ici?

Answer 1

C'est pour ajouter dynamiquement des composants qui sont ajoutés à l'aide de ViewContainerRef.createComponent(). Ajoutant à entryComponents indique le mode hors connexion de modèle compilateur pour compiler et créer des usines pour eux.

Les composants enregistrés en route configurations sont ajoutés automatiquement à l' entryComponents car router-outlet utilise également ViewContainerRef.createComponent() ajouter acheminé composants pour les DOM.

Les modèles hors connexion compilateur de gré à gré (OTC) s'appuie uniquement les composants qui sont effectivement utilisés. Si les composants ne sont pas utilisées dans les modèles directement le gré à GRÉ ne peut pas savoir si ils ont besoin d'être compilé. Avec entryComponents vous pouvez dire le DUT aussi de compiler ces composants afin qu'ils soient disponibles au moment de l'exécution.

Qu'est ce qu'une entrée de composant? (angulaire.io)

NgModule docs (angulaire.io)

Définit les composants qui doivent être compilées ainsi lorsque ce composant est défini. Pour chaque composants énumérés ici, Angulaire permettra de créer un ComponentFactory et de le stocker dans le ComponentFactoryResolver.

Si vous n'avez pas de liste dynamiquement un composant ajouté à l' entryComponents vous obtiendrez un message d'erreur un combat, un manque d'usine car Angulaire de ne pas avoir créé un.

Voir aussi https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

Answer 2

Les autres réponses à la mention de cette mais le résumé est:

• son besoin lorsqu'un composant n'est pas utilisé à l'intérieur d'un modèle html.
• Par exemple lors de l'utilisation Angulaire de dialogue Matériau des composants

Matériel de dialogue composants sont créés à l'intérieur de la TS du code et non le modèle:

openDialog() { const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' }); }

Cela vous oblige à vous inscrire comme une entryComponent:

• entryComponents: [MyExampleDialog]

Sinon vous obtiendrez un message d'erreur:

• ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

Answer 3

Vous n'obtiendrez pas de meilleure explication que Angulaire docs.

Et ci-dessous l'explication de l'angle de docs.

Une entrée composant est un composant qui Angulaire des charges impérativement par type.

Un composant chargé de façon déclarative par l'intermédiaire de son sélecteur n'est pas une entrée composante.

La plupart des composants de l'application sont chargés de manière déclarative. Angulaire utilise le composant sélecteur pour localiser l'élément dans le modèle. Il crée ensuite le code HTML de la représentation de la composante et l'insère dans le DOM à l'élément sélectionné. Ce ne sont pas des composants de saisie.

Quelques composants ne sont chargés dynamiquement et ne sont jamais référencé dans un modèle de composant.

Le bootstrap racine AppComponent est une entrée composante. Vrai, son sélecteur correspond à une balise d'élément dans index.html. Mais index.html n'est pas un modèle de composant et de l' AppComponent sélecteur ne correspond pas à un élément de modèle de composant.

Angulaire des charges AppComponent dynamiquement parce que c'est classé par type en @NgModule.bootstrap ou boostrapped impérativement avec le module de ngDoBootstrap méthode.

Les composants dans les définitions de route sont également des composants de saisie. Une définition de la route fait référence à un composant par son type. Le routeur ignore un acheminé du composant sélecteur (même s'il en a un) et charge le composant dynamiquement en RouterOutlet.

Le compilateur ne peut pas découvrir ces composants de saisie de regarder pour eux dans d'autres modèles de composants. Vous devez le dire à leur sujet en les ajoutant à l' entryComponents de la liste.

Angulaire ajoute automatiquement les types de composants du module entryComponents:

• Le composant dans l' @NgModule.bootstrap de la liste.
• Composants référencés dans la configuration du routeur.

Vous n'avez pas à parler de ces composants de façon explicite, même si cela est sans danger.

Answer 4

Le entryComponents tableau est utilisé pour définir des composants qui ne sont pas trouvés dans le html et créé dynamiquement. Angulaire exige cette astuce pour trouver l'entrée de composant et de les compiler.

Il existe deux principaux types de composants de saisie:

• Le bootstrap composant racine.
• Un composant que vous spécifiez dans la définition d'une route.

Pour des informations plus détaillées autour de composants de saisie, veuillez vous référer angulaire.io https://angular.io/guide/entry-components