如何在 ionic 3 中使用 shepherd 和 jquery？

Question

我正在尝试在我的 ionic 3 应用程序中构建巡回演出，因此我选择 Shepherd 来实现它。

但在ionic 3中，它是一个打字稿框架，所以我们不能直接在html文件中调用jQuery，而是在.ts文件中。而且shepherd有一个函数调用'addStep'，比如

tour.addStep('example-step', {
    text: 'Testing',
    attachTo: '.example-css-selector bottom',
    classes: 'example-step-extra-class',
    buttons: [
       {
          text: 'Next',
          action: tour.next
       }
    ]
});

所以，我已经安装了 jQuery 和 shepherd 插件。但是在尝试下面的代码时，它不会起作用。

在 home.html 中

<p>Title</p>
<button id="shepherdElement">Click Me</button>

在 home.ts 中

const tour = new Shepherd.Tour();

tour.addStep('example-step', {
      text: 'Testing',
      attachTo: $('#shepherdElement')
  });

tour.start();

我希望游览会附加到#shepherdElement，但事实并非如此。

实物图

Answer 1

我不确定通过 Jquery 访问，但如果 id 选择器只是您的问题，那么您可以通过以下方式访问它。

const tour = new Shepherd.Tour();
tour.addStep('example-step', {
  text: 'Testing',
  attachTo: '#shepherdElement'
  });
tour.start();