1

Tengo el siguiente código en un componente llamado tab2.page.ts. Este código hace referencia a un calendario donde puedo hacer un CRUD de Eventos, el cual funciona todo como se quiere.

        import { Component, ViewChild, OnInit, Inject, LOCALE_ID } from '@angular/core';
    import { CalendarComponent } from "ionic2-calendar/calendar";

    import { LoadingController } from '@ionic/angular';
    import { formatDate } from '@angular/common';


    import { AlertController, PopoverController, MenuController } from '@ionic/angular';

    import { Tab2PopoverComponent } from '../tab2-popover/tab2-popover.component';
    import { UserService } from '../servicios/user.service';
    import { User } from 'firebase';



    @Component({
      selector: 'app-tab2',
      templateUrl: 'tab2.page.html',
      styleUrls: ['tab2.page.scss']
    })
    export class Tab2Page {



      event = {
        title: '',
        desc: '',
        startTime: '',
        endTime: '',
        allDay: false
      };

      minDate = new Date().toISOString();

      eventSource = [];

      calendar = {
        mode: 'week',
        currentDate: new Date()
      }

      viewTittle = '';
      @ViewChild(CalendarComponent) myCal: CalendarComponent;
      constructor(private loadingCtrl: LoadingController, private alertCtrl: AlertController, @Inject(LOCALE_ID) private locale: string,) { }
      resetEvent() {
        this.event = {
          title: '',
          desc: '',
          startTime: new Date().toISOString(),
          endTime: new Date().toISOString(),
          allDay: false
        };

      }





      //Agrega eventos

      addEvent() {
        let eventCopy = {
          title: this.event.title,
          startTime: new Date(this.event.startTime),
          endTime: new Date(this.event.endTime),
          allDay: this.event.allDay,
          //desc: this.event.desc
        }

        if (eventCopy.allDay) {
          let start = eventCopy.startTime;
          let end = eventCopy.endTime;

          eventCopy.startTime = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate()));
          eventCopy.endTime = new Date(Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate() + 1));
        }

        this.eventSource.push(eventCopy);
        this.myCal.loadEvents();
        this.resetEvent();

      }





      next() {
        var swiper = document.querySelector('.swiper-container')['swiper'];
        swiper.slideNext();
      }

      back() {
        var swiper = document.querySelector('.swiper-container')['swiper'];
        swiper.slidePrev();
      }

      // Change between month/week/day
      changeMode(mode) {
        this.calendar.mode = mode;
      }

      today() {
        this.calendar.currentDate = new Date();
      }

      //mirar el evento y eliminar.
      async onEventSelected(event) {
        // Use Angular date pipe for conversion
        let start = formatDate(event.startTime, 'medium', this.locale);
        let end = formatDate(event.endTime, 'medium', this.locale);

        const alert = await this.alertCtrl.create({
          header: event.title,
          subHeader: event.desc,
          message: 'From: ' + start + '<br><br>To: ' + end,
          buttons: [{
            text: 'OK',
            handler: () => {
              console.log('ok clicked' );
              console.log(event)
            }
          },
          {
            text: 'Eliminar',
            handler: () => {

              console.log(this.eventSource);
               for (let index =0; index <= this.eventSource.length; index++) {
                 if (this.eventSource[index] === event) {
                  this.eventSource.splice(index, 1)
                  this.presentLoading();
                  console.log('Eliminar clicked: ' + index );
                  console.log(event);
                  this.myCal.loadEvents();

                 }



               }

            }
          },
          {
            text: 'Editar',
            handler: () => {
              for (let index =0; index <= this.eventSource.length; index++) {
                if (this.eventSource[index] === event) {
                  let newEvent = {
                    title: this.event.title,
                    startTime: new Date(this.event.startTime),
                    endTime: new Date(this.event.endTime),
                    allDay: this.event.allDay,
                    desc: this.event.desc
                  }

                  if (newEvent.allDay) {
                    let start = newEvent.startTime;
                    let end = newEvent.endTime;

                    newEvent.startTime = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth(), start.getUTCDate()));
                    newEvent.endTime = new Date(Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), end.getUTCDate() + 1));
                  }

                  this.eventSource.push(newEvent);
                  this.myCal.loadEvents();
                  //this.resetEvent();
                  this.eventSource.splice(index, 1)
                }
              }


              console.log('Editar clicked');


              this.presentLoading();
              this.myCal.loadEvents();
            }
          }
          ]
        });


        alert.present();
      }



      async presentLoading() {
        const loader = await this.loadingCtrl.create({
          message: "Por favor, espera...",
          duration: 1000

        });
        loader.present();
      }









      onViewTitleChanged(title) {
        this.viewTittle = title;
      }

      onTimeSelected(ev) {
        let selected = new Date(ev.selectedTime);
        this.event.startTime = selected.toISOString();
        selected.setHours(selected.getHours() + 1);
        this.event.endTime = (selected.toISOString());

      }

}

Quiero usar el método de addEvent() en otro componente, ya que por cuestión de diseño, me piden usar el formulario de eventos en un Ion-Split (otro componente llamado menu-cal.page.ts, el de abajo).

import { Component, OnInit,ViewChild } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Router, RouterEvent } from '@angular/router';
import { UserService } from '../servicios/user.service';
import { Tab2Page  } from "../tab2/tab2.page";
import { CalendarComponent } from "ionic2-calendar/calendar";
import { TabsPage } from '../tabs/tabs.page';


@Component({
  selector: 'app-menu-cal',
  templateUrl: './menu-cal.page.html',
  styleUrls: ['./menu-cal.page.scss'],
})
export class MenuCalPage implements OnInit {

  selectedPath='';



  constructor(private router: Router, private us: UserService, private t2: Tab2Page) {
    this.router.events.subscribe ((event: RouterEvent) =>{
      this.selectedPath = event.url;
    });


   }



  ngOnInit() {


  }

  addEvent(){
   return this.t2.addEvent()
  }

y este es su codigo html menu-cal.hmtl

<ion-split-pane >
  <ion-menu side="end">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content fullscreen class="calendario2">
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" [class.active-item]="selectedPath === p.url">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
        <ion-card>
          <ion-card-header tappable (click)="collapseCard = !collapseCard">
            <ion-card-title>Nueva tarea</ion-card-title>
          </ion-card-header>
         <ion-card-content *ngIf="!collapseCard">
              <ion-item>
                  <ion-input type="text" placeholder="Describe tu tarea" [(ngModel)]="event.title"></ion-input>
                </ion-item>
                <ion-item>
                    <ion-label>Hora de inicio</ion-label>
                    <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.startTime" [min]="minDate"></ion-datetime>
                  </ion-item>
                  <ion-item>
                    <ion-label>Hora final</ion-label>
                    <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.endTime" [min]="minDate"></ion-datetime>
                  </ion-item>
                  <ion-item>
                    <ion-label>Todo el día?</ion-label>
                    <ion-checkbox [(ngModel)]="event.allDay"></ion-checkbox>
                  </ion-item>
                  <ion-button fill="outline" expand="block" (click)="addEvent()"  >Add Event</ion-button>


          </ion-card-content>
        </ion-card>


      </ion-content>
  </ion-menu>
  <ion-router-outlet  main></ion-router-outlet>
</ion-split-pane>

lo que sucede es que, si llamo el metodo como esta especificado en menu-call.pag.ts, el HtML me arroja lo siguiente en consola:

introducir la descripción de la imagen aquí

Y así mismo 127 errores con la mismo descripción.

supongo que debe ser por como estoy llamando el método de agregar o no se. Agradecería su apoyo. Saludos :D

3
  • No acabo de enteder cómo recibes un componente en el constructor de otro componente... el 2 may. 2019 a las 15:50
  • Supongo que no he entendido muy bien aquella cuestión, por eso pido algo de ayuda hehe
    – Nicolás
    el 2 may. 2019 a las 15:51
  • Te aconsejo leer esto y esto el 2 may. 2019 a las 15:54

1 respuesta 1

-1

pon el método addEvent() estático Static addEvent(), en el componente donde quieras usar el metodo importa el componente que tiene el metodo, y para usar el metodo solo pones el nombre del componente seguido de un punto y el nombre del metodo.

Ejemplo:

ComponentA 

Static addEvent()

ComponentB
 
obtenerComponentA()

  ComponentA.addEvent();

espero le sirva a otros usuarios saludos

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.