如何将intro.js与angular2 cli集成？

Question

异常：

Uncaught (in promise): Error: Error in :0:0 caused by: Cannot read property 'introJs' of undefined
Error: Error in :0:0 caused by: Cannot read property 'introJs' of undefined

Answer 1

1. 使用npm npm install intro.js --save

2. 在项目中添加introjs css样式

   "styles": [ "styles.css", "./node_modules/intro.js/introjs.css" ]

3. 在模板文件中：

   <div id="tool1">Place to show first tooltip</div>
   <div id="tool2">Place to show second tooltip</div>
   <button (click)="startTour()">Start Tour</button>
   

4. 在组件中首次导入introjs     var introJS=require('intro.js')

5. 然后定义startTour()方法

   startTour(){
    var intro:any = introJS.introJs();
    intro.setOptions({
     steps: [
      {
       element: '#tool1',
       intro: 'Input tool will be used to bring in the Weekly Store Traffic data that was created in the data preparation workflow.',
       position: 'left'
      },
      {
       element: '#tool2',
       intro: 'Enter <code>.\\Supporting_Macros\\Data\\Weekly_Store_Traffic.yxdb</code> within the <b>Connect a File or Database</b> dialog<br><img src="img/configs/config1.png"><br>Leave <b>Options</b> section as defaults',
       position: 'right'
      }
     ],
     showBullets: true,
     showButtons: true,
     exitOnOverlayClick: false,
     keyboardNavigation: true,
     });
    intro.start();
   }
   

Answer 2

如果您不使用requirejs，那么以下方法对我有用：

在.angular-cli.json中将.js和.css文件添加到项目中

styles: [
  "../node_modules/intro.js/minified/introjs.min.css"
]

scripts: [
  "../node_modules/intro.js/intro.js"
]

将此添加到您的导入中：

import { CommonService } from '../../shared-module/services/common.service'; 
declare var introJs:any;

最终在内容加载后添加如下内容，我必须在运行intro.js之前添加setTimeout几百毫秒以允许DOM呈现：

showIntro(){
    var intro:any = introJs();
    intro.setOptions({
      steps: [
        {
          element: '#matNewBidsCardTitles',
          intro: "This is a test",
          position: "right"
        },
        {
          element: '.results-save-bid',
          intro: 'Save a bid',
          position: 'bottom'
        },
        {
          element: '.results-bid-score',
          intro: 'Step <i>two</i> description',
          position: 'right'
        }],
      showBullets: true,
      showButtons: true,
      exitOnOverlayClick: false,
      keyboardNavigation: true,
    });
    intro.start();
  }

Answer 3

使用以下方式安装intro.js

yarn add intro.js

或

npm install --save intro.js

在angular.json中添加CSS

"styles": [
     "node_modules/intro.js/introjs.css"
]

JS

"scripts": [
     "node_modules/intro.js/intro.js"
]

现在在ts文件中

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

这对我有用。对于其他solutions

Answer 4

对于 Angular2+

步骤 1：在 Angular 项目中添加 IntroJs**

npm install intro.js @types/intro.js --save

Step2：在 angular.json(.angular-cli.json) 中包含 IntroJs CSS 和 js 库

            "styles": [
              "src/styles.css",
              "node_modules/intro.js/introjs.css"
            ],
            "scripts": [
              "node_modules/intro.js/intro.js"
            ],

注意：为了使演示 UI 看起来不错，我们在 index.html

中添加了 bootstrap.css（可选）

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

我们已经完成了项目中 introJS 的集成。

第 3 步： 在应用组件（或任何父组件）中实现

现在我们将了解如何在 Angular Component 中使用 IntroJS？

打开 app.component.ts 文件，然后包含如下所示的 introJs

// app.component.ts
import { Component, OnInit } from '@angular/core';

import * as introJs from 'intro.js/intro.js'; // importing introjs library

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  introJS = introJs(); // assigning it to variable

  constructor() {
    // write the content that should be render in each panel
    this.introJS.setOptions({ 
      steps: [
        { 
          intro: "Hello world!"
        },
        {
          element: document.querySelector('#step1'),
          intro: "This is a tooltip."
        },
        {
          element: document.querySelectorAll('#step2')[0],
          intro: "Ok, wasn't that fun?",
          position: 'right'
        },
        {
          element: '#step3',
          intro: 'More features, more fun.',
          position: 'left'
        },
        {
          element: '#step4',
          intro: "Another step.",
          position: 'bottom'
        },
        {
          element: '#step5',
          intro: 'Get it, use it.'
        }
      ]
    });
  }

  ngOnInit() {
    this.introJS.start(); // Start introjs tour
  }

}

注意：HTML 属性参考此链接

https://introjs.com/docs/intro/attributes