Primeng fullcalendar 4 eventClick 确实路由到'/null'
Primeng fullcalendar 4 eventClick does route to '/null'
嘿,每次调用 eventClick() 方法时,都会执行它,然后路由到 localhost:4200/null。但是我的日历在 localhost:4200/prime-ng 路线上。所以我试图将路由 '/null' 重定向到日历路由。但是该组件将被初始化为新的。然后我发现这个post:
其实和我一样的问题,但是他用JavaScript搞定了。所以我虽然可以用 angular 路由器做同样的事情。但它在 URL 将被更改之前路由。
eventClick: (el) => this.router.navigate(['/prime-ng']),
如果您能给我一些提示和技巧,我将不胜感激。
组件
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>
我找到问题了。要防止它,只需这样做:
eventClick: (el) => el.jsEvent.preventDefault(),
嘿,每次调用 eventClick() 方法时,都会执行它,然后路由到 localhost:4200/null。但是我的日历在 localhost:4200/prime-ng 路线上。所以我试图将路由 '/null' 重定向到日历路由。但是该组件将被初始化为新的。然后我发现这个post:
eventClick: (el) => this.router.navigate(['/prime-ng']),
如果您能给我一些提示和技巧,我将不胜感激。
组件
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>
我找到问题了。要防止它,只需这样做:
eventClick: (el) => el.jsEvent.preventDefault(),