Javascript 从.ts中编写的简单Angular2应用程序调用/加载.js类和函数时出现问题

我有一个简单的angular应用程序（），我正在尝试使用hopsocch.js（）添加图形覆盖。通过调用以下脚本，我成功地从我的index.html运行了hopscotch：

` //my_tour.js
  // Define the tour!
  var tour = {
    id: "hello-hopscotch",
    steps: [
      {
        title: "My Header",
        content: "This is the header of my page.",
        target: "title",
        placement: "bottom"
      }
    ]
  };

  // Start the tour!
  hopscotch.startTour(tour);`

---

但是，当我试图将其与angular应用程序分离时，我无法/不知道如何将其与其依赖项（hopsocch.js、hopsocch.css）正确连接。我对angular2很陌生，今天大部分时间都在研究这个问题，但都没有用。像.ts文件这样简单的东西，它是我应用程序的一部分，可以打电话到hopscotch.startTour（tour）；那就足够了。任何帮助都将不胜感激！谢谢。

这就是我对Angular 4.4.6所做的：

安装跳房子

npm install hopscotch --save

在“.angular cli.json”中

在“your.component.html”中

---

这就是我对Angular 4.4.6所做的：

安装跳房子

npm install hopscotch --save

在“.angular cli.json”中

在“your.component.html”中

可能的副本：可能的副本：

<div #elementOneId>Element One</div>
<div #elementTwoId>Element Two</div>    
<button (click)="doTour()">Do Tour</button>

import * as hopscotch from 'hopscotch';

export class YourComponent {

  @ViewChild('elementOneId') elementOne: ElementRef;
  @ViewChild('elementTwoId') elementTwo: ElementRef;

  doTour() {      
    var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Step 1",
          content: "blah blah blah",
          target: this.elementOne.nativeElement,
          placement: "left"
        },
        {
          title: "Step 2",
          content: "I am the step for element 2...",
          target: this.elementTwo.nativeElement,
          placement: "bottom"
        },
      ]
    };

    hopscotch.startTour(tour);

  }

}