wake-up-neo.com

Angular 5: Faules Laden der Komponente ohne Routing

In meiner Webanwendung habe ich ein Popup-Fenster "Allgemeine Geschäftsbedingungen", das durch Klicken mit einem Klick in die Fußzeile (also eine Kernkomponente) geöffnet wird. Das Popup enthält mehrere Registerkarten, von denen jede eine ziemlich große Vorlagendatei ist.

Ich frage mich, ob es möglich ist, Registerkartenvorlagen in getrennte Blöcke zu verschieben und ihr Lazy-Loading zu organisieren. Ich bin mir nicht sicher, ob die Standardeinstellung Angular Lazy-Loading für mich akzeptabel ist, da ich keine separate Route für das Popup haben möchte.

7
user3429127

Sie können warten, bis der Benutzer auf den Link geklickt hat, und sobald das Click-Ereignis auftritt, laden Sie die erforderliche Komponente in die Ansicht

  1. Sie müssen einen Platzhalter für die Komponente in der Ansicht definieren. 
  2. Die Komponente für Bedingungen und Konditionen muss als Entry-Level-Komponente für ihr Modul oder das Modul definiert werden, in dem es verwendet wird. 

     entryComponents: [
        ChildComponent
      ],
    
  3. Stellen Sie sicher, dass Sie sich auf den Platzhalter in Ihrer Komponente beziehen, und fügen Sie die Bedingungen und Bedingungen dynamisch hinzu.

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

und

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

und erstellen Sie die Komponente dynamisch:

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;

 }

hier ist ein Beispiel für Sie: https://add-or-remove-dynamic-component-parent-child.stackblitz.io

2
nircraft