带有离子 3 角度的 intro.js

Question

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

安装： npm install intro.js --save

然后在我的 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>

在我家.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>