トラブル.TS

Question

で書かれたシンプルなAngular2アプリから/ロードの.jsクラスや関数を呼び出すには、私は、単純な角度のアプリケーション（https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html）を持っていると私はhopscotch.js（http://linkedin.github.io/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);` 

が、私の角度アプリの離れてそれを作るためにしようとしたとき、私は/正しくその依存関係とそれを接続する方法がわからないことができない：私はこのスクリプトを呼び出すことで、私ののindex.htmlから正常に実行するために石蹴りました（hopscotch.js,hopscotch.css）。私はangular2にはとても新しく、これを研究して今日はほとんど役に立っていますが、役に立たないのです。 .ts私のアプリの一部であり、hopscotch.startTour（ツアー）に電話をかけることができるような単純なものです。で十分でしょう。どんな助けもありがとう！ありがとう。

Answer 1

これは、角度4.4.6で行ったことです。

ホップスコッチをインストールします。 your.component」では

".angular-cli.json" で

npm install hopscotch --save 

... "your.component.html" で

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

...

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

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

    } 

}