Question

我有一个简单的角度应用程序（https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html），我正在尝试使用 hopscotch.js （http://linkedin.github.io/hopscotch/）添加图形叠加层。我通过调用此脚本从我的 index.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);`

但是当我尝试将它与我的角度应用程序分开时，我不能/不知道如何正确地将它与其依赖项连接（ hopscotch.js ， hopscotch.css ）。我是angular2的新手，今天大部分时间都在研究这个，但无济于事。像 .ts 文件那样简单的东西，它是我的应用程序的一部分，可以调用 hopscotch.startTour（tour）; 就足够了。任何帮助，将不胜感激！感谢。

Answer 1

这就是我对Angular 4.4.6的所作所为：

安装跳房子。

npm install hopscotch --save

In＆＃34; .angular-cli.json＆＃34; ...

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

在＆＃34; your.component.html＆＃34; ...

中

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

在＆＃34; your.component.ts＆＃34; ...

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

  }

}

从.ts

1 个答案: