AnswerBun.com

Problemas entre componentes en Angular

Stack Overflow en español Asked by Andres Bonilla on September 29, 2020

como van?
soy nuevo en angular y resulta que decidí hacer una app en ionic y pues mi idea es que en la página (tab1) pueda agregar tanto una imagen, como una fecha y después de darle click al botón de guardar, quiero que se me cree un objeto que guarde estos dos datos en la otra pagina (tab2).

código HTML de la primera página (tab1):

<ion-header [translucent]="true">
    <ion-toolbar>
        <ion-title class="titulo-palabras">
            Linee
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="all">
    <!-- <ion-header collapse="condense">
        <ion-toolbar>
            <ion-title size="large" class="titulo-palabras">linee</ion-title>
            <ion-tittle size="medium">palabras</ion-tittle> 
        </ion-toolbar>
    </ion-header> -->

    <ion-secction class="tabb1">

        <div>

            <input type="file" #imagen>
            <input type="text" placeholder="Fecha de la foto seleccionada" value="hola " #fecha>

        </div>
        <div>

            <button class="botonEnviar" (click)="recibirValues(imagen.value, fecha.value)">Guardar</button>

            <div *ngFor="let caja of cajasProgreso">
                <h3>{{cajaProgreso.imagenAgregada}}</h3>
                <h3>{{cajaProgreso.fechaAgregada}}</h3>
            </div>


        </div>

    </ion-secction>
</ion-content>

Archivo TypeScript de la primera página (tab1):

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  cajasProgreso:object[] = [];

  cajaProgreso:any = {

    imagenAgregada: '',
    fechaAgregada: ''

  }

  constructor() {
 
  }
  
  async recibirValues(imagen, fecha){

       if(imagen ==='' || fecha ===''){
        return; 

      }else{
         this.cajaProgreso.imagenAgregada = imagen;
         this.cajaProgreso.fechaAgregada = fecha;

        await this.cajasProgreso.push(this.cajaProgreso);
      
      }
      
  }
  
}

código HTML de la segunda pagina (tab2):

 <ion-header [translucent]="true">
        <ion-toolbar>
            <ion-title>
                progreso
            </ion-title>
        </ion-toolbar>
    </ion-header>
    
    <ion-content [fullscreen]="true">
        <ion-header collapse="condense">
            <ion-toolbar>
                <ion-title size="large" class="titulo-seccion">progreso</ion-title>
            </ion-toolbar>
        </ion-header>
    
        <ion-content class="tabb2">
            <div *ngFor="let caja of cajasProgresoImportadas">
                <h3>{{cajasProgresoImportadas.imagenImportada}}</h3>
                <h3>{{cajasProgresoImportadas.fechaImportada}}</h3>
            </div>
    
    
        </ion-content>
    
    </ion-content>

Archivo typeScript de la segunda pagina (tab2):

import { Component, Input } from '@angular/core';
import { Tab1Page } from '../tab1/tab1.page';

@Component({
  selector: 'app-tab2',introducir el código aquí
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  cajasProgresoImportadas:object[] = [];

  cajaProgresoImportada:any = {

    imagenImportada: '',
    fechaImportada: ''

  }

 
  constructor(private tab1:Tab1Page) {

       console.log(  this.cajaProgresoImportada.imagenImportada);

       this.cajaProgresoImportada.imagenImportada = tab1.cajaProgreso.imagenAgregada;
       this.cajaProgresoImportada.fechaImportada = tab1.cajaProgreso.fechaAgregada;

       console.log(  this.cajaProgresoImportada.imagenImportada);
  }

}

Espero logren ayudarme, Gracias de antemano

Add your own answers!

Related Questions

Ajax onChange ordenar resultado en tabla

0  Asked on February 14, 2021 by frodo

     

Problema con Switch Case en React Native

0  Asked on February 14, 2021 by oliverguez

   

Error al trabajar con libreria de streamlit y pydeck, python3.8

1  Asked on February 14, 2021 by felipe-espinoza

   

Problema con URL en php al enviar “:” en un parametro

1  Asked on February 12, 2021 by enrique-espinosa

   

calculos de produccion con php

0  Asked on February 12, 2021 by wilbert-palacios

     

ordenar divs con jquery

1  Asked on February 12, 2021

   

CKEDITOR instances no definido

0  Asked on February 11, 2021 by elvis-agreda

     

Select en Laravel 5.8

1  Asked on February 10, 2021 by danielzam

   

Imprimir fichero HTML en Python

1  Asked on February 10, 2021 by angogi

 

Filas duplicadas en sql usando INNER JOIN

2  Asked on February 10, 2021 by manny

     

Error al leer un caracter en c

1  Asked on February 9, 2021

     

Relación de tablas SQL server

1  Asked on February 9, 2021 by edward-sc

   

Error al correr “bundle install” ruby on rail

1  Asked on February 9, 2021 by julio-machan

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir