fix(PLEX): instancias duplicadas de plex service. Elemento dinamico de navbar (#369)

Author: negro89

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@andes/plex",
-    "version": "9.0.0-beta.2",
+    "version": "9.0.0-beta.3",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/andes/plex.git"

package.json

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { PlexVisualizadorService } from '../core/plex-visualizador.service';
 import { Plex } from './../core/service';
 
@@ -11,7 +11,7 @@ import { Plex } from './../core/service';
                             <ng-content select="[navIcon]"></ng-content>
 
                             <div class="menu-item">
-                                <ng-template #menuItem></ng-template>
+                                <ng-template #navbarItemHost></ng-template>
                             </div>
                             <div class="title">
                                 <ng-container *ngFor="let item of plex.title; let last = last">
@@ -84,7 +84,8 @@ import { Plex } from './../core/service';
                 </div>`,
 })
 
-export class PlexAppComponent implements OnInit {
+export class PlexAppComponent implements OnInit, AfterViewInit {
+    @ViewChild('navbarItemHost', { read: ViewContainerRef }) navbarItemVcr!: ViewContainerRef;
     @Input() type = 'inverse';
 
     public loginOpen = false;
@@ -134,4 +135,9 @@ export class PlexAppComponent implements OnInit {
             this.chart.dataset[0].data.push(1);
         }
     }
+
+    ngAfterViewInit() {
+        // se pasamos al servicio de plex el host donde insertar componentes dinámicos
+        this.plex.setNavbarHost(this.navbarItemVcr);
+    }
 }

src/lib/app/app.component.ts

@@ -32,10 +32,10 @@ export class NavItemComponent implements AfterViewInit {
         this.cd.detectChanges();
     }
 
-    @HostListener('click', ['event'])
-    click() {
+    @HostListener('click', ['$event'])
+    click($event: Event) {
         if (!this.opened) {
-            event.stopImmediatePropagation();
+            $event.stopImmediatePropagation();
             this.plexHelp.toggle();
             this.opened = true;
         }

src/lib/app/nav-item.component.ts

@@ -1,6 +1,6 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { TitleCasePipe } from '@angular/common';
-import { ComponentFactoryResolver, Injectable, ViewContainerRef } from '@angular/core';
+import { ComponentRef, Injectable, Type, ViewContainerRef } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import * as _introJs from 'intro.js';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -18,6 +18,9 @@ export class Plex {
     public appStatus: Subject<any> = new Subject();
     public userInfo: any;
     public navbarVisible = true;
+    private navbarHost?: ViewContainerRef;
+    private navbarCmpRef?: ComponentRef<any>;
+    private pending?: { component: Type<any>; inputs?: any };
 
     /**
      * Cuenta los POST, PATCH, PUT, DELETE
@@ -31,10 +34,10 @@ export class Plex {
     constructor(
         private titleService: Title,
         private noficationService: NotificationsService,
-        private componentFactoryResolver: ComponentFactoryResolver,
         private breakpointObserver: BreakpointObserver,
         private titlecasePipe: TitleCasePipe
-    ) { }
+    ) {
+    }
 
     collapse() {
         this.menu = this.menu.map((item) => ({ ...item, collapsed: true }));
@@ -296,9 +299,7 @@ export class Plex {
                     imageHeight: 250,
                     confirmButtonText: 'Siguiente',
                     cancelButtonText: 'Cancelar',
-                    showCancelButton: true,
-                    // animation: false,
-                    // customClass: 'animated fadeInLeft'
+                    showCancelButton: true
                 });
             }
 
@@ -344,7 +345,6 @@ export class Plex {
             const steps: introJs.Step[] = [];
             for (const i in config.steps) {
                 steps.push({
-                    // title: config.steps[i].title,
                     intro: (config.steps[i].title ? `<h3>${config.steps[i].title}</h3>` : '') + config.steps[i].content,
                     element: document.querySelector(`[plex-wizard-ref="${i}"]`),
                     position: 'right'
@@ -383,21 +383,39 @@ export class Plex {
         this.viewContainerRef = viewContainerRef;
     }
 
+    setNavbarHost(vcr: ViewContainerRef) {
+        this.navbarHost = vcr;
+
+        if (this.pending) {
+            const p = this.pending;
+            this.pending = undefined;
+            this.setNavbarItem(p.component, p.inputs);
+        }
+    }
+
     /**
      * Instancia una componente y la injecta en la parte dinamica del plex-app
      * @param componentRef
      * @param inputs
      */
-    setNavbarItem(componentRef, inputs) {
-        // el setTimeout resuelve el error ExpressionChangedAfterItHasBeenCheckedError.
-        // La componente dinamica se estaba creando antes de que finalize la componente padre, lo que generaba ese error.
-        // Por eso encolamos la creación de la componente al proximo tick del navegador.
-        setTimeout(() => {
-            this.viewContainerRef?.clear();
-            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentRef);
-            const component = this.viewContainerRef?.createComponent(componentFactory);
-            Object.assign(component?.instance ?? {}, inputs);
-        }, 0);
+    setNavbarItem<T>(component: Type<T>, inputs?: Partial<T>) {
+
+        if (!this.navbarHost) {
+            this.pending = { component, inputs };
+            return; // evita reintentos infinitos
+        }
+
+        this.navbarHost.clear();
+        const cmpRef = this.navbarHost.createComponent(component);
+        if (inputs) { Object.assign(cmpRef.instance, inputs); }
+        cmpRef.changeDetectorRef.detectChanges();
+        this.navbarCmpRef = cmpRef;
+    }
+
+    clearNavbarItem() {
+        this.navbarCmpRef?.destroy();
+        this.navbarCmpRef = undefined;
+        this.navbarHost?.clear();
     }
 
     /**

src/lib/core/service.ts

@@ -270,7 +270,6 @@ import { SimpleNotificationsModule } from './toast/simple-notifications.module';
     providers: [
         TitleCasePipe,
         HelpService,
-        Plex,
         { provide: MAT_DATE_LOCALE, useValue: 'es-AR' },
     ]
 })