Angular如何导入Tooltip.js并在ts文件中对其进行初始化

时间:2019-04-02 07:52:18

标签: angular fullcalendar

我不知道如何在app.component.ts中导入tooptip.js。谁能教我?

import { Component, OnInit, ViewChild } from '@angular/core';
import { OptionsInput } from '@fullcalendar/core';
import timeslot from '@fullcalendar/resource-timeline';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarComponent } from 'ng-fullcalendar';
// import Tooltip from 'node_modules/tooltip/src/index';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  options: OptionsInput;
  eventsModel: any;
  @ViewChild('fullcalendar') fullcalendar: CalendarComponent;

  ngOnInit(): void {
    // @ts-ignore
    this.options = {
      editable: false,
      resourceLabelText: 'Rooms',
      // eventClick: (info) => {
      //   const tooltip = new Tooltip(info.el, {
      //     title: info.event.extendedProps.description,
      //     placement: 'top',
      //     trigger: 'hover',
      //     container: 'body'
      //   });
      // },
      resources: [{
        id: 'a',
        title: 'Room A'
      },
        {
          id: 'b',
          title: 'Room B'
        }],
      events: [{
        id: 'a',
        resourceId: 'a',
        start: '2019-04-01T01:00:00', end: '2019-04-01T02:00:00',
        description: 'haha',
        title: 'a'
      }, {
        id: 'b',
        resourceId: 'b',
        start: '2019-04-01T02:00:00', end: '2019-04-01T03:00:00',
        title: 'b',
        description: 'haha'
      }],
      aspectRatio: 1.8,
      timeZone: 'UTC',
      defaultView: 'resourceTimelineDay',
      schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
      scrollTime: '08:00',
      views: {
        resourceTimelineDay: {
          buttonText: 'Lession',
          slotDuration: '00:15'
        }
      },
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'resourceTimelineDay'
      },
      plugins: [ timeslot, interactionPlugin ]
    };
  }
}

当我导入工具提示并在eventRender{}中对其进行初始化时,视图页面中没有任何反应。

<div class="pl-3 pr-3 pt-3 pb-3">
    <ng-fullcalendar #fullcalendar [options]="options"></ng-fullcalendar>
</div>

当我单击它时,错误显示:

The errors img shown here

那我该怎么办?

0 个答案:

没有答案