Angular 带ionic 3的intro.js

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

安装： npm安装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>

在我家

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

从“intro.js/intro.js”导入introJs；
构造函数（）{
log（'Hello DynamicHomeComponent Component'）；
this.expanded=false；
//初始化步骤
introJs.introJs（）.setOptions({
步骤：[
{
元素：'#id1'，
简介：“第一步描述”，
位置：'右'
},
{
元素：'#第二步_元素_id'，
简介：“第二步描述”，
位置：'底部'
},
{
元素：'#步骤_三个元素_id'，
简介：“第三步描述”，
位置：'左'
}
]
});
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的日志中也没有错误，我更改了：

import introJs from '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>

密码

我改变了：

import introJs from '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>

密码

我很困惑。你说没用，然后又说有用。因此，请澄清什么有效，什么不起作用。对于混淆，不起作用的是intro js覆盖了元素，而不是突出显示它们。我在编译时问题中说--allowJS对于intro.js是false。抱歉回复太慢，检查这里的代码我感到困惑。你说没用，然后又说有用。因此，请澄清什么有效，什么不起作用。对于混淆，不起作用的是intro js覆盖了元素，而不是突出显示它们。我在编译时问题中说--allowJS对于intro.js是错误的。抱歉，回复太慢，检查代码我可能错了，但我认为introjs元素“#id1”可能是元素的id，而不是角度引用。我可能错了，但我认为introjs元素“#id1”可能是元素的id，而不是角度引用。