1

我有一个简单的 Angular 应用程序（https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html），我正在尝试使用hopscotch.js（http://linkedin.js）添加图形覆盖。 github.io/hopscotch/）。通过调用此脚本，我让 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); 就足够了。任何帮助，将不胜感激！谢谢。

4

1 回答 1

0

这就是我对 Angular 4.4.6 所做的：

安装跳房子。

npm install hopscotch --save

在“.angular-cli.json”...

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

在“你的.component.html”...

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

在“你的.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);

  }

}
于 2018-02-09T00:23:50.197 回答