如何在Angular typescript中使用Timetable.js？

Question

我正在尝试将这个很好的javascript插件实现到一个Angular6项目中：Timetable.js / on Github

为了寻找这样做的方法，我遇到了这个：How to use Timetable.js in ionic2 typescript。这篇文章已经发布两年了，这个问题似乎还没有解决。基于tmnrkb发布的代码，我在angular.json文件中声明了js脚本文件后，在我的app.component中编写了该代码：

import { Component } from '@angular/core';

declare class Timetable {
  constructor();
  scope: string;
  locations: Array<string>;
  events: Array<any>;
  Renderer(tt: any): any;
  setScope(start: number, end: number);
  addLocations(locations: Array<string>);
  addEvent(artistCode: string, stageCode: string, startDate: Date, endDate: Date);
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  timetable = new Timetable();

  constructor() {
    this.addTimeTable();
  }

  addTimeTable() {
    this.timetable.setScope(9, 3);

    this.timetable.addLocations(['London', 'Paris', 'Los Angeles']);

    this.timetable.addEvent('Sightseeing', 'London', new Date(2018, 8, 25, 9), new Date(2018, 8, 26, 12));

    this.timetable.addEvent('Zumba', 'Paris', new Date(2018, 8, 27, 9), new Date(2018, 8, 29, 12));

    this.timetable.addEvent('Cocktails', 'Los Angeles', new Date(2018, 8, 22, 9), new Date(2018, 8, 23, 12));

    const renderer = this.timetable.Renderer(this.timetable);
    // const renderer = new Timetable.Renderer(this.timetable);
    renderer.draw('.timetable');
  }



}

当我运行ng serve时，它会编译代码，但在控制台中，我得到了这个错误：

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: this.timetable.Renderer is not a function
    at AppComponent.push../src/app/app.component.ts.AppComponent.addTimeTable (app.component.ts:39)
    at new AppComponent (app.component.ts:25)

所以我想知道为什么它说渲染器不是一个函数。

Answer 1

因此，基于Timetable.js (the plugin's Github)，我设法通过将其转换为Typescript来使其在Angular中工作。这是我Github上的结果，如果有人感兴趣的话。感谢stevenaanen因为他的插件正是我需要的。