angular7 - Angular-Calendar 上下文菜单不起作用如何调出？

Question

我正在尝试angular-calendar从这里集成上下文菜单。 在称为集成https://mattlewis92.github.io/angular-calendar/#/context-menu 的子模块上。Calendar

安装所有必要的模块后，context-menu对我不起作用。

这是我的子模块：

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from "@angular/common/http";
import { CalendarModule, DateAdapter } from 'angular-calendar';
import { ContextMenuModule } from 'ngx-contextmenu';
import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { reducerCalendar } from "./state/calendar.reducer";
import { EffectsEvents } from "./state/calendar.effects";


import { IboCalendarComponent } from './components/ibo-calendar/ibo-calendar.component';
import { IboCalendarHeaderComponent } from './ibo-calendar-header/ibo-calendar-header.component';
import { CalendarShellComponent } from './containers/calendar-shell/calendar-shell.component';

import { SharedModule } from "./../shared-components/shared.module";

const iboCalenderRoutes: Routes = [
  // { path: '', redirectTo:'setupConfig', pathMatch:'full' },
  { path: 'iboCalendar', component: CalendarShellComponent }
];


@NgModule({
  declarations: [IboCalendarComponent, IboCalendarHeaderComponent, CalendarShellComponent],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    HttpClientModule,
    SharedModule,
    CalendarModule.forRoot({
      provide: DateAdapter,
      useFactory: adapterFactory
    }),
    ContextMenuModule.forRoot({
      useBootstrap4: true
    }),
    RouterModule.forChild(iboCalenderRoutes),
    EffectsModule.forFeature([EffectsEvents]),
    StoreModule.forFeature('reducerCalendar', reducerCalendar)
  ],
  exports: [ ]
})
export class iboCalendarModule { }

这是 ts 文件：

import { Component, OnInit, ChangeDetectionStrategy, Input, OnChanges  } from '@angular/core';
import { CalendarService } from "./../../services/calendar.service";
import { ModelEvent, EventState } from "./../../models/model.event";
import { CalendarEvent } from 'angular-calendar';
import { Observable, Subject  } from 'rxjs';
import { colors } from "./../../utilities/colors";
import { tap } from 'rxjs/operators';
declare var $:any;

@Component({
    selector: 'ibo-calendar',
    templateUrl: './ibo-calendar.component.html',
    styleUrls: ['./ibo-calendar.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class IboCalendarComponent implements OnChanges,OnInit {

    view: string = 'month';
    // viewDate: Date = new Date('August 19, 2018');
    viewDate: Date = new Date()

    @Input() events:ModelEvent[];
    @Input() currentEvent: ModelEvent;

    refresh: Subject<any> = new Subject();


    constructor() { }

    ngOnInit() {

        const headerHeight = $('.site-header').outerHeight();
        //moving content down to header
        $('body').css({paddingTop: headerHeight});

    }

    ngOnChanges() {

        if( this.currentEvent ) {
            this.viewDate = new Date(this.currentEvent.start);
        }
    }

    eventClicked({ event }: { event: CalendarEvent }): void {
        console.log('Event clicked', event);
    }

    addEvent(date:Date):void {

        console.log('date is', date);

        this.events.push({
            id : 0,
            start : date,
            title : 'New Event',
            end : new Date(),
            allDay : false
        })

        this.refresh.next();

    }


}

这是模板文件：

<div class="container-fluid site-content">

    <ibo-calendar-header [(view)]="view" [(viewDate)]="viewDate"></ibo-calendar-header>

    <context-menu #basicMenu>
  <ng-template contextMenuItem (execute)="addEvent($event.item)">
    Add event
  </ng-template>
</context-menu>

<ng-template
  #monthCellTemplate
  let-day="day"
  let-openDay="openDay"
  let-locale="locale"
  let-tooltipPlacement="tooltipPlacement"
  let-highlightDay="highlightDay"
  let-unhighlightDay="unhighlightDay"
  let-eventClicked="eventClicked"
>
  <div
    class="fill-height"
    [contextMenu]="basicMenu"
    [contextMenuSubject]="day.date"
  >
    <div class="cal-cell-top">
      <span class="cal-day-badge" *ngIf="day.badgeTotal > 0"
        >{{ day.badgeTotal }}</span
      >
      <span class="cal-day-number"
        >{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span
      >
    </div>
    <div class="cal-events">
      <div
        class="cal-event"
        *ngFor="let event of day.events"
        [style.backgroundColor]="event.color.primary"
        [ngClass]="event?.cssClass"
        (mouseenter)="highlightDay.emit({event: event})"
        (mouseleave)="unhighlightDay.emit({event: event})"
        [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
        [tooltipPlacement]="tooltipPlacement"
        (click)="$event.stopPropagation(); eventClicked.emit({event: event})"
      ></div>
    </div>
  </div>
</ng-template>

<ng-template
  #weekHeaderTemplate
  let-days="days"
  let-locale="locale"
  let-dayHeaderClicked="dayHeaderClicked"
>
  <div class="cal-day-headers">
    <div
      class="cal-header"
      *ngFor="let day of days"
      [class.cal-past]="day.isPast"
      [class.cal-today]="day.isToday"
      [class.cal-future]="day.isFuture"
      [class.cal-weekend]="day.isWeekend"
      (click)="dayHeaderClicked.emit({day: day})"
      [contextMenu]="basicMenu"
      [contextMenuSubject]="day.date"
    >
      <b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br />
      <span
        >{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span
      >
    </div>
  </div>
</ng-template>

<ng-template #dayHourSegmentTemplate let-segment="segment" let-locale="locale">
  <div
    class="cal-hour-segment"
    [ngClass]="segment.cssClass"
    [contextMenu]="basicMenu"
    [contextMenuSubject]="segment.date"
  >
    <div [hidden]="!segment.isStart" class="cal-time">
      {{ segment.date | calendarDate:'dayViewHour':locale }}
    </div>
  </div>
</ng-template>


    <div class="alert alert-info">
        Click on a day on the view.
        <strong *ngIf="clickedDate">You clicked on this day: {{ clickedDate | date:'medium' }}</strong>
    </div>

    <div>
        <div [ngSwitch]="view">

            <mwl-calendar-month-view *ngSwitchCase="'month'" [viewDate]="viewDate" 
                [events]="events"  (eventClicked)="eventClicked($event)" (dayClicked)="clickedDate = $event.day.date">
            </mwl-calendar-month-view>

            <mwl-calendar-week-view *ngSwitchCase="'week'" 
                [viewDate]="viewDate" [events]="events" (eventClicked)="eventClicked($event)"  (dayHeaderClicked)="clickedDate = $event.day.date">
            </mwl-calendar-week-view>

            <mwl-calendar-day-view *ngSwitchCase="'day'" 
                [viewDate]="viewDate" [events]="events" (eventClicked)="eventClicked($event)">
            </mwl-calendar-day-view>
        </div>

    </div>

</div>

也没有错误。

有人指导我吗？提前致谢。