web-dev-qa-db-fra.com

Angular 5: chargement paresseux du composant sans routage

Dans mon application Web, une fenêtre contextuelle "Termes et conditions" s'ouvre par un clic sur le lien dans le pied de page (il s'agit donc d'un composant essentiel) . La fenêtre contextuelle est composée de plusieurs onglets, chacun d'entre eux constituant un assez gros fichier de modèle.

Je me demande s'il est possible de déplacer des modèles d'onglets pour séparer des blocs et organiser leur chargement paresseux? Je ne suis pas sûr que le chargement par défaut Angular par défaut soit acceptable pour moi, car je ne souhaite pas avoir un itinéraire séparé pour le menu contextuel.

angularangular5lazy-loading
7
user3429127

Vous pouvez attendre que l'utilisateur clique sur le lien et, dès que l'événement Click a lieu, chargez le composant requis dans la vue .

  1. Vous devez définir un espace réservé pour le composant dans la vue. 

  2. Le composant termes et conditions doit être défini en tant que composant de niveau entrée pour son module ou le module où il est utilisé. 

     entryComponents: [
    ChildComponent
  ],

  3. Assurez-vous de faire référence à l'espace réservé dans votre composant et attachez les termes et conditions de manière dynamique.

      <div>
      <ng-template #viewContainerRef></ng-template>
   </div>

et

@ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;

et créez le composant dynamiquement:

createComponent() {

let componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
let componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
let currentComponent = componentRef.instance;

currentComponent.selfRef = currentComponent;
currentComponent.index = ++this.index;

  // providing parent Component reference to get access to parent class methods
  currentComponent.compInteraction = this;

 }

il existe un exemple pour vous ici: https://add-or-remove-dynamic-component-parent-child.stackblitz.io

2
nircraft