Primeng fullcalendar 4 eventClick делает маршрут к '/ null' - PullRequest
Новая
       8

Primeng fullcalendar 4 eventClick делает маршрут к '/ null'

0 голосов
/ 26 февраля 2020

Привет каждый раз, когда вызывается метод eventClick (), он выполняет его, а затем направляет на localhost: 4200 / null. Но мой календарь на маршруте localhost: 4200 / премьер-нг. Поэтому я попытался перенаправить маршрут '/ null' на маршрут календарей. Но компонент будет инициализирован новым. Затем я нашел этот пост: fullcalendar - изменение URL-адреса события Это на самом деле та же проблема, что и у меня, но он сделал это с JavaScript. Поэтому я могу сделать то же самое с angular роутером. Но он направляется непосредственно перед тем, как URL будет изменен. 

    eventClick: (el) => this.router.navigate(['/prime-ng']),

Буду очень признателен, если у вас есть несколько советов и подсказок для меня.

Compnente 

import { EventService } from '../services/event.service';
import { EditorState, Lesson } from '../models/calendar-helper';
import { Component, OnInit, ViewChild } from '@angular/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { FullCalendar } from 'primeng';
import { Router } from '@angular/router';

@Component({
  selector: 'app-primeng-calendar',
  templateUrl: './primeng-calendar.component.html',
  styleUrls: ['./primeng-calendar.component.sass']
})
export class PrimengCalendarComponent implements OnInit {
  @ViewChild('calendar', { static: true })
  calendar: FullCalendar;
  events: Lesson[];
  options = {
    plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
    header: {
      left: 'prev,next',
      center: 'title',
      right: 'addAppointmentButton,dayGridMonth,listView,timeGridWeek,timeGridDay'
    },
    customButtons: {
      addAppointmentButton: {
        text: 'Neuer Event erfassen',
        click: () => this.showEditor = !this.showEditor
      }
    },
    eventClick: (el) => this.router.navigate(['/prime-ng']),
    editable: true,
    locale: 'de',
    allDaySlot: false,
    businessHours: {
      daysOfWeek: [ 1, 2, 3, 4 , 5],
      startTime: '08:00',
      endTime: '18:00'
    },
  };
  showEditor = false;
  constructor(private eventService: EventService,
              private router: Router) {}

  ngOnInit() {
    this.eventService.getEvents().toPromise()
      .then( () => this.events = this.eventService.events);
  }

  onClose(state?: EditorState): void  {
      this.showEditor = !this.showEditor;
      this.events  = [...this.eventService.events];
  }

}

Html

<app-event-editor
  (close)="onClose($event)"
  *ngIf="showEditor"></app-event-editor>

<p-fullCalendar
#calendar
[events]="events"
[options]="options">
</p-fullCalendar>

1 Ответ

0 голосов
/ 26 февраля 2020

Я нашел проблему. Чтобы предотвратить это, просто сделайте это: 

    eventClick: (el) => el.jsEvent.preventDefault(),
...