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

Question

>我有一个简单的角度应用程序(https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html(，我正在尝试使用跳房子添加图形叠加.js(http://linkedin.github.io/hopscotch/(。我通过调用此脚本，从我的索引成功运行了跳房子.html：

` //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 应用程序分开时，我无法/不知道如何正确将其与其依赖项(跳房子.js、跳房子.css(正确连接。我对 angular2 很陌生，今天大部分时间都在研究这个，但无济于事。像.ts文件这样简单的东西，它是我的应用程序的一部分，可以调用hopscotch.startTour(tour(;就足够了。任何帮助将不胜感激！谢谢。

Answer 1

这是我对 Angular 4.4.6 所做的：

安装跳房子。

npm install hopscotch --save

在".angular-cli.json"中...

{
  "apps": [
    {
      "styles": [
        "../node_modules/hopscotch/dist/css/hopscotch.min.css"
      ]
    }
  ]
}

在"您的组件.html"中...

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

在"your.component.ts"中...

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);
  }
}