0

Me explico mejor:

tengo un componente y dentro de el llamo varios componentes así:

componente llamado pags40:

<div  class="row justify-content-center no-gutters"> 
    <div class="col-4 text-center"> <button (click)="nextPage()" class="btn"> Siguiente </button> </div>
    <div class="col-4 text-center"> <button (click)="prevPage()" class="btn"> Anterior </button>  </div> 
</div>

<app-portada *ngIf="cont === 0"> </app-portada>
<app-pag1 *ngIf="cont === 1"> </app-pag1>

allí llamo a 2 componentes dependiendo del valor 'cont', este valor se modifica dependiendo de los botones de arriba, los uso como un paginador.

El componente AppPag1 se ve así:

<div style="width: 100%;">
  <div class="row no-gutters justify-content-center">
    <div class="col-12 no-gutters text-center ">
      <div class="d-flex justify-content-center" style="width= 100%;">
        <div id="contPrincipal">
          <div id="img1" class="colorContCargaImg img" (click)="fileInput1.click()" [style.background-image]="'url(' + imagesUrl.img1 + ')'">
            <input #fileInput1 type="file" id="imageUpload1" accept=".png, .jpg, jpeg" (change)="uploadImg($event)">
          </div>
          <div id="img2" class="colorContCargaImg img" (click)="fileInput2.click()" [style.background-image]="'url(' + imagesUrl.img2 + ')'">
            <input #fileInput2 type="file" id="imageUpload2" accept=".png, .jpg, jpeg" (change)="uploadImg($event)" >
          </div>

          <div id="text1" class="colorContCargaImg img" (click)="fileInput3.click()" [style.background-image]="'url(' + imagesUrl.img3 + ')'">
            <input #fileInput3 type="file" id="imageUpload3" accept=".png, .jpg, jpeg" (change)="uploadImg($event)">
          </div>

          <div id=textTitulo class="colorContCargaImg img" (click)="fileInput4.click()" [style.background-image]="'url(' + imagesUrl.img4 + ')'">
            <input #fileInput4  type="file" id="imageUpload4" accept=".png, .jpg, jpeg" (change)="uploadImg($event)">
          </div>          

          <div id=text2 class="colorContCargaImg textoNegro" (click)="openDialog('text2')">
              {{data.text2}}
          </div>          

          <div id=text3 class="colorContCargaImg textoBlanco" (click)="openDialog('text3')">
              {{data.text3}}
          </div>          

          <div id=text4 class="colorContCargaImg textoBlanco" (click)="openDialog('text4')" >
              {{data.text4}}
          </div>          

          <div id=text5 class="colorContCargaImg img" (click)="fileInput5.click()" [style.background-image]="'url(' + imagesUrl.img5 + ')'">
            <input #fileInput5 type="file" id="imageUpload5" accept=".png, .jpg, jpeg" (change)="uploadImg($event)">
          </div>

        </div>
        
      </div>
      
    </div>

  </div>

</div>   

<button (click)="enviar()"> Enviar Al Back </button>

y básicamente lo que hago es cargar unas imagenes a varios contenedores usando el servicio a continuación:

import { Injectable } from '@angular/core';
import { Images } from '../interfaces/images/images';




@Injectable({
  providedIn: 'root'
})
export class UploadImagesService {
    pag1= {} as Images
    pag2= {} as Images
    pag3= {} as Images
    pag4= {} as Images
    pag5= {} as Images
    pag6= {} as Images
    pag7= {} as Images
    pag8= {} as Images
    pag9= {} as Images
    pag10= {} as Images
    pag11= {} as Images
    pag12= {} as Images
    pag13= {} as Images


    constructor() { }
    
    uploadImg(event,numPag){
        
        let reader = new FileReader();
        let file = event.target.files[0];
        if (event.target.files && event.target.files[0]) {
            reader.onloadstart= ()=> {
                // this.imgLoader= true; para colocar un pre-loader
            }
            reader.readAsDataURL(file);

            reader.onload = () => {
                switch (numPag) {
                    case 1:
                        if(event.target.id=='imageUpload1')
                            this.pag1.img1= reader.result;
                        if(event.target.id=='imageUpload2')
                            this.pag1.img2= reader.result;
                        if(event.target.id=='imageUpload3')
                            this.pag1.img3= reader.result;
                        if(event.target.id=='imageUpload4')
                            this.pag1.img4= reader.result;
                        if(event.target.id=='imageUpload5')
                            this.pag1.img5= reader.result;
                        if(event.target.id=='imageUpload6')
                            this.pag1.img6= reader.result;
                        console.log('\n\nmostrando objeto antes de guardar en store:',this.pag1)
                        localStorage.setItem("imgsPag1", JSON.stringify(this.pag1)); //se gaurda en localStoragepara manreber la data
                        console.log('\n\nmostrando objeto DESPUES de guardar en store:',this.getData(1))
                    break;
                        if(event.target.id=='imageUpload1')
                            this.pag2.img1= reader.result;
                        if(event.target.id=='imageUpload2')
                            this.pag2.img2= reader.result;
                        if(event.target.id=='imageUpload3')
                            this.pag2.img3= reader.result;
                        if(event.target.id=='imageUpload4')
                            this.pag2.img4= reader.result;
                        if(event.target.id=='imageUpload5')
                            this.pag2.img5= reader.result;
                        if(event.target.id=='imageUpload6')
                            this.pag2.img6= reader.result;

                    case 2:
                        // code...
                    break;

                    // case "1":
                    //  // code...
                    // break;

                    // case "1":
                    //  // code...
                    // break;

                    // case "1":
                    //  // code...
                    // break;

                    // case "1":
                    //  // code...
                    // break;

                    // case "1":
                    //  // code...
                    // break;

                    // case "1":
                    //  // code...
                    // break;
                    
                    default:
                        console.log('Default...')
                    break;
                }



                // console.log('\nAntes de Retornar...',this.pag1)
                
                
            };

        };

        return this.pag1

    }

    getData(numPag){
        console.log('Entrando a getData....')
        switch (numPag) {
            case 1:
                // console.log('Mostrando this.Pag1 en GetData:',this.pag1)
                console.log('Data del Store:',JSON.parse(localStorage.getItem("imgsPag1")))
                return JSON.parse(localStorage.getItem("imgsPag1"));

            break;
            
            case 2:
                return this.pag2;
            break;
        }
    }

}

El componente AppPortada es igual al AppPag, tengo varios contenedores y subo imagenes a ellos usando el servicio de arriba.

¿Cuál es el problema?

Quiero que cuándo se use el "paginador", las imágenes cargadas no se pierda, ejemplo: si estoy en la portada, cargué unas imágenes y uso el paginador para ir a la pagina 1 (AppPag1), y luego regreso de nuevo a la portada, se muestren las imágenes como fueron subidas y no se borren. Estaba intenda usar LocalStorage, como ven en el código, pero solo me guarda una imagen, dice que el límite ha excedido y considerando que son bastantes imágenes ya vi que no es víable el localStorage. Que podría implementar para resolver este problema?

Gracias de antemano al que me pueda ayudar. Saludos!

1 respuesta 1

0

Puedes usar el BEHAVIOUR SUBJECT o el SUBJECT de Rxjs, en si son observables que almacenan datos que te permite conservar o actualizar en cualquier componente que se subscriba a ellos. Puedes crear un .ts de la siguiente forma:

         import { Injectable } from '@angular/core';
         import { BehaviorSubject } from 'rxjs';

         @Injectable({
            providedIn: 'root'
         })
         export class PersistenceDataSourceService {

            constructor() { }
            private dataPercistenceSource = new BehaviorSubject<Object>('');
            public dataPercistence = this.dataPercistenceSource.asObservable();
       
            updateDataPersistence(imageB64: string){
               this.dataPercistenceSource.next(imageB64);
            }
         }

dentro del .ts de tu componente cuando adjuntas u obtienes de algún lado la imagen guardas el dato de la siguiente forma.(tienes que inyectar el servicio al constructorconstructor(private persistenceDataService: PersistenceDataSourceService))

     this.persistenceDataService.updateDataPersistence(this.imagenB64);

NOTA: Este dato se destruye si la pagina se recarga.

Para obtener el dato guardado, te subscribes ya sea en el onInit o en el constructor

    unsubscribe$: Subject<any> = new Subject<any>(); // declaracion dentro de la clase

    this.persistenceDataService.dataPercistence
        .pipe(takeUntil(this.unsubscribe$)).subscribe((data) => {
      this.imagenB64 = data;
    });

finalmente tienes que desuscribirte en el on destroy

      ngOnDestroy(){
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
      }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.