intro.js with ionic 3 angular

问题

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

install: npm install intro.js --save

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>

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();
  }

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>

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

回答1:

I changed :

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

to:

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

code at .ts file :

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

code at .html :

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

      </ion-item>

来源：https://stackoverflow.com/questions/46780985/intro-js-with-ionic-3-angular

标签

angular

ionic3

intro.js