具有离子3角度的intro.js [英] intro.js with ionic 3 angular

问题描述

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

i am trying intro.js to get working with my ionic 3 angular app. the steps i did is:

安装：
npm install intro.js --save

install: npm install intro.js --save

然后在我的index.html中我有

then in my index.html i have

<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

in my 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如下：

in html the id is added as below:

 <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的日志中也没有错误

however nothing happens when i run the app. no error as well in the logs for introjs

推荐答案

我改变了：

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

to：

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>

这篇关于具有离子3角度的intro.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！