Problemas entre componentes en Angular

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