带离子3角的intro.js

Question

我正在尝试使用intro.js来使用我的ionic 3 angular应用程序。我所做的步骤是：

安装: npm install intro.js --保存

然后在我的index.html中，我有

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>

在我的home.ts

    import introJs from 'intro.js/intro.js';

constructor() {
    console.log('Hello DynamicHomeComponent Component');
    this.expanded = false;

       // Initialize steps
        introJs.introJs().setOptions({
            steps: [
                {
                    element: '#id1',
                    intro: "Step one description",
                    position: 'right'
                },
                {
                    element: '#step_two_element_id',
                    intro: "Step <i>two</i> description",
                    position: 'bottom'
                },
                {
                    element: '#step_three_element_id',
                    intro: 'Step <span style="color: green;">three</span> description',
                    position: 'left'
                }
            ]
        });

  introJs.introJs().start();
  }

在html中，id添加如下：

 <ion-row  style="border-top:1px solid #AFAFAF" text-wrap>
                          <ion-col [navPush]="accountPage" >
                              <ion-label class="widget-para-title widget-link" #id1>Accounts with open opportunities</ion-label>     
                         </ion-col>
                         </ion-row>

然而，当我运行这个应用程序时，什么也没有发生。introjs的日志中也没有错误

Answer 1

我改变了：

import introJs from 'intro.js/intro.js';

至：

import introJs from '../../../node_modules/intro.js/intro.js';

.ts文件中的代码：

   intro() {
  let intro = introJs.introJs();
// Initialize steps
intro.setOptions({
  steps: [
    {
      intro: "Hello world!"
    },
    {
      element: document.querySelector('#step1'),
      intro: "This is a tooltip."
    }
  ]
});
intro.start();
  }

.html上的代码：

  <ion-item step1 id="step1">
        <ion-label >Password</ion-label>
        <ion-input [(ngModel)]="password" type="password"></ion-input>

      </ion-item>