如何在ionic 3中将牧羊人与jquery一起使用？

Question

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

但是在ionic 3中，它是一个打字稿框架，因此我们不能直接在html文件中而是在.ts文件中调用jQuery。牧羊人有一个名为

的函数调用“ 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();