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!