3

我正在使用p-fullCalendar控件来显示约会。

我想在标题中添加一个自定义按钮来添加一个新约会。

我已经通过根据完整日历文档在选项中指定它来做到这一点:

export class AppointmentsComponent implements OnInit {

  events: any[];
  options: any;
  displayAddAppointment: boolean;

  constructor() { }

  ngOnInit() {

    this.options = {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'addAppointmentButton, month,agendaWeek,agendaDay'
      },
      customButtons: {
        addAppointmentButton:{
          text:"New appointment",
          click: r=> {
            //this works but displayAddAppointment within the component is inaccessible.
            //I would like to display a modal dialog to add a new appointment from this.
          }
        }
      }
    };

html是:

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

 <p-dialog header="Schedule new appointment" 
         [(visible)]="displayAddAppointment" 
         modal="modal">
 </p-dialog>
<div>

该按钮显示良好,并且单击事件也被触发。

但是如何处理这个按钮的点击事件,以便显示模态对话框呢?

click 事件中的this按钮本身是:

thiswithinclick事件

4

2 回答 2

2

将点击事件绑定到组件方法并绑定(this):

addAppointmentButton: {
    text: 'New appointment',
    click: this.click.bind(this)
}
// ...
click() {
    this.displayAddAppointment = !this.displayAddAppointment;
}

测试和工作。这样你就不会失去范围。

于 2019-01-18T07:44:57.410 回答
1

您可以设置_self = this和处理这个_self变量

ngOnInit() {
    let _self = this;
    this.options = {
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'addAppointmentButton, month,agendaWeek,agendaDay'
      },
      customButtons: {
        addAppointmentButton:{
          text:"New appointment",
          click: (r) => {
              console.log(_self);
          }
        }
      }
    };
于 2019-01-17T02:17:15.477 回答