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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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